sks-qrcode

一个适用于web端，小程序上的二维码绘制库

npm install sks-qrcode --save

使用demo

在 h5 页面上使用。

import QRCode, {QRErrorCorrectLevel} from './qrcode';

function createQrcode(text, width, height) {
    var linkUrl = text;
    var qr = new QRCode(-1, QRErrorCorrectLevel.M);
    qr.addData(linkUrl);
    qr.make();
    qr.getModuleCount();

    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext('2d');

    var tileW = canvas.width / qr.getModuleCount();
    var tileH = canvas.height / qr.getModuleCount();

    // console.log(qr.getModuleCount());
    for(let row = 0; row < qr.getModuleCount(); row++) {
        for(let col = 0; col < qr.getModuleCount(); col++) {
            ctx.fillStyle = qr.isDark(row, col) ? "#000000" : "#ffffff";
            let w = (Math.ceil((col+1)*tileW) - Math.floor(col*tileW));
            let h = (Math.ceil((row+1)*tileH) - Math.floor(row*tileH));
            ctx.fillRect(Math.round(col*tileW),Math.round(row*tileH), w, h);
        }
    }

	return canvas;
}

在小程序里面使用。需要自己提供给一个 canvas 的实例

import QRCode, {QRErrorCorrectLevel} from './qrcode';

Page({
	onLoad: function (options) {
		const query = wx.createSelectorQuery();
		let _this = this;
		query.select('#id-canvas')
			.fields({node: true, size: true})
			.exec(function (res) {
				console.log(res);
				const canvas = res[0].node;
				instance = canvas
				// 绘制canvas
				_this.drawQrCode({
					canvas: canvas,
					data: {
						qrCodeText: 'https://eng-static-dev71.sksedu.com/eng_wechat_adviser_qrcode.html?open_id=oRrx75SsMz1nDWv74dVzHpBGlOR8'
					},
				});
			});
	},
	drawQrCode(options) {
		let canvas = options.canvas;
		const qrCodeText = options.qrCodeText
  		const ctx = canvas.getContext('2d');

		let width = 200;
		let height = 200;
		var qr = new QRCode(-1, QRErrorCorrectLevel.L);
		qr.addData(qrCodeText);
		qr.make();
		qr.getModuleCount();
		var tileW = width / qr.getModuleCount();
		var tileH = height / qr.getModuleCount();
		for(let row = 0; row < qr.getModuleCount(); row++) {
			for(let col = 0; col < qr.getModuleCount(); col++) {
				ctx.fillStyle = qr.isDark(row, col) ? "#000000" : "#ffffff";
				let w = (Math.ceil((col+1)*tileW) - Math.floor(col*tileW));
				let h = (Math.ceil((row+1)*tileH) - Math.floor(row*tileH));
				ctx.fillRect(Math.round(col*tileW),Math.round(row*tileH), w, h);
			}
		}
	}
})