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

/** * * 初始化二维码生成插件 * */ var qrdata = ''; var myqr = document.querySelector('#myqr'); var qrcode = document.querySelector('#qrcode'); var qr = new QRCode(qrcode, { width: 300, height: 300, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.L });

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

function buildQr () { var img = qrcode.querySelector('img'); img.onload = function() { qrdata = img.src; main(); }; qr.makeCode(myqr.value); }

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

var canvasImg = null; function main() { //初始化 canvasImg = new LCanvasImg({ cw: 768,//canvas width ch: 1163,//canvas height iw: '100%',//output img width ih: 'auto',//output img height display:'none'//canvas display }); //资源加载 canvasImg.load([{ name: 'qr', src: qrdata }, { name: 'bg', src: '../img/bg.jpg' }, { name: 'z', src: '../img/z.png' }], build); };

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

function build() { var farr = [{ txt: document.querySelector('#mytxt1').value, fontsize: 26, fontfamily: 'fzjt', ftop: 140, fleft: 194 }, { txt: '胡鑫', fontsize: 26, fontfamily: 'fzjt', ftop: 220, fleft: 394 }, { txt: '邓逸昕', fontsize: 26, fontfamily: 'fzjt', ftop: 220, fleft: 294 }, { txt: document.querySelector('#mytxt1').value, fontsize: 26, fontfamily: 'fzjt', ftop: 220, fleft: 194 }]; canvasImg.addImg({ name: 'bg', x: 0, y: 0, width: 768, height: 1163 }); farr.forEach(function(obj) { canvasImg.addFont(obj); }); canvasImg.addImg({ name: 'z', x: 0, y: 0, width: 100, height: 100 }); canvasImg.addImg({ name: 'z', sx: 0, sy: 0, sw: 150, sh: 150, x: 100, y: 100, width: 100, height: 100 }); canvasImg.addImg({ name: 'qr', x: 400, y: 800, width: 200, height: 200 }); }; window.onload = buildQr;

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

整个demo已经上传至github上了，如果需要做类似需求的同学可以下载该插件，可以节约大家许多时间
资源地址：https://github.com/xfhxbb/LCanvasImg