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

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

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

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

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

　　好了，资源加载完成事件我们得到了，可以继续下面的逻辑，既然是基于canvas，当然需要创建并初始化我们的canvas，我根据自己的需求，这个功能在我所使用的项目中不论初始化多少次，只会存在一个，所以我做了如下的控制：

　　canvas创建好了，接下来我们需要实现图片渲染的能力，canvas的图片渲染使用的是drawImage方法，根据官方文档，该方法有3种传参方式：

　　接下来我们需要开发文字生成的能力，这个比较简单，如果对canvas相关api熟悉点的，这部分没有难度：

　　最后一步是二维码的生成，这个有点坑，自己开发肯定来不及了，我选用的是一个开源插件：qrcode，根据这个插件，我们可以在一个img中动态生成二维码的base64字串ASP编程，而有了这个字串，我们也很方便的将内容输出到我们的canvas中，为了保证体验，这个插件的最外层div直接display：none，避免它干扰到我们的实际项目。

　　由于这个img是动态变化的，我们获取base64字串的时候一定要在该img的onload事件的回调内去获取，这点非常重要：

　　ok，准备工作都完成了，接下来我们需要开始初始化我们的插件了，我预先埋下了很多可配置的参数：

　　看见上面的build变量了吗？我们将图片生成逻辑全部写在这个build方法中，在load资源complete后，会执行build;

　　最后一句话非常重要,为什么这里我需要用window.onload事件，如果你使用的是webfont，当webfont下载成功后，其实还有一小段时间需要将font字体载入进浏览器中，只有在window.onload事件时，webfont字体文件才能生效。

　　整个demo已经上传至github上了，如果需要做类似需求的同学可以下载该插件，可以节约大家许多时间

　　以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！