批量生成带编号的二维码

今天需要打印一百张带编号的二维码，类似于小黄的二维码，底部有编号。就是这种：

我把网址提供给采购，淘宝居然让我们提供一百张图片。

做为一个心地善良的程序员，我绝对不可能发给设计狮 100 张二维码，让她加班 PS 添加编号一百次。同时做为一个会偷懒的程序员，首先要去 Google，寻找现成的轮子。

一番忙碌后，在线版、excel 插件版、软件版，没有一个满足需求。自己动手，丰衣足食。

原理很简单，首先生成二维码的 base64 编码，然后画在 canvas 里，同样写上文字，在循环生成批量下载就 OK 啦！

生成二维码的 base64 编码（详见参考资料里的 node-qrcode 文档）

QRCode.toDataURL('https://ofo.so/plate/'+i, function (error, url) {
    if (error) console.error(error)
    console.log(url);
});

在 canvas 画二维码

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = new Image();
image.onload = function() {
  ctx.drawImage(image,  0, 0);
};
image.src = url;

在二维码下方写上文字

ctx.font = '25px 黑体';
ctx.fillText(i, 15, 150);

下载

var a = document.createElement('a'), 
e = document.createEvent('MouseEvents'); 
e.initEvent('click', false, false); 
a.href = href; 
a.download = name; 
a.dispatchEvent(e);

效果如下：

参考资料：

https://github.com/soldair/node-qrcode
http://www.jq22.com/webqd4287
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

菜单