批量生成带编号的二维码

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

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

做为一个心地善良的程序员,我绝对不可能发给设计狮 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

陈志成

继续阅读此作者的更多文章