网络编程
位置：首页>> 网络编程>> JavaScript>> 基于canvas的二维码邀请函生成插件

基于canvas的二维码邀请函生成插件

作者：ppk2　　发布时间：2024-04-17 10:40:53　

标签：canvas,二维码

这是17年的第一篇博文，话说这天又是产品同学跑过来问我说：hi，lenny，你看现在市面上流行各种装逼H5，随便输入点名字啥的就给我生成房产证了，这种还可以分享出去，传播率可高了，或者你再看这里，一键生成邀请函，牛逼吧，要不你也帮我做一个这个功能，我去玩点传播手段。

基于canvas的二维码邀请函生成插件

我看见效果后第一反映就是，肯定canvas进行的图片拼接，现在市面上流行的效果具体是如何实现的我没有去看源码，思路很清晰，于是晚饭后没有下班，开始我的插件制作之旅了。

首先，我们需要思考，既然是图片处理，那么就必然存在图片下载，我们知道图片的onload是异步回调，所有的资源必须在下载完成后才可以进行接下来的逻辑，前置资源下载的逻辑就很关键，我们不仅需要在onload事件回调后去处理我们后续的流程，同时需要在所有必须资源加载完成后才执行，所以我们需要构建一个资源数组大致如下：


[{
{
 name: 'bg',
 src: '../img/bg.jpg'
}, {
 name: 'z',
 src: '../img/z.png'
}]

为了获得最终的complete事件，我们需要利用一个全局变量监听onload或者onerror次数：


var i = 1;
 arr.forEach(function(obj, index, array) {
 function onLoad() {
  _self[obj.name] = img;
  if (i < array.length) {
  ++i;
  } else {
  console.log('complete');
  };
 }
 var img = new Image();
 img.onload = onLoad;
 img.onerror = onLoad;
 img.src = obj.src;

来源：http://www.cnblogs.com/xfhxbb/p/LCanvasImg.html

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com