微信小程序生成彩色二维码

发布时间 2023-07-06 20:52:09作者: 时光独醒

微信小程序专用的二维码组件,支持base64输出和canvas绘制两种方式。

代码下载地址:https://github.com/flyingsouthwind/wx-mini-qrcode

const qrcode = require('wx-mini-qrcode/src/index');

Page({
    data: {
        qrcode0: ''
    },
    onReady(){
        let text = 'https://m.baidu.com';

        // 输出base64格式
        let qrcode0 = qrcode.outputQRCodeBase64(text, {
            size: 400,
            color: '#CC6600',
            padding: 16,
            background: '#FFCC99'
        });

        this.setData({
            qrcode0
        })

        // canvas内绘制模式一
        qrcode.drawQRCodeToCanvas(text, {
            ctx: 'qrcode1',
            size: 200,
            color: '#CC6600',
            padding: 16,
            background: '#FFCC99'
        });

        // canvas内绘制模式二
        let qrcode2 = wx.createCanvasContext('qrcode2');
        qrcode.drawQRCodeToCanvas(text, {
            ctx: qrcode2,
            size: 200,
            color: '#CC6600',
            padding: 16,
            background: '#FFCC99'
        });
        qrcode2.draw();
    }
});

1. 以base64图片格式输出二维码:outputQRCodeBase64: function (text, options)

参数:

text:必须,二维码内容,比如url

options:参数对象

{
    ecc: 'H',               // 可选,容错级别,可选值L、M、Q和H(默认)
    size: 256,              // 可选,二维码尺寸,必须为整数。默认为256
    padding: 0,             // 可选,单侧空白边宽度,默认为0
    color: '#000000',       // 可选,二维码颜色,必须是16进制,默认为'#000000'
    background: '#ffffff'   // 可选,二维码背景色,必须是16进制,默认为'#ffffff'    
}

返回值:

  二维码图片的base64数据

2.绘制二维码到canvas: drawQRCodeToCanvas: function (text, options)

参数:

text:必须,二维码内容,比如url

options:参数对象

{
    x: 0,                   // 可选,二维码左上角点横坐标
    y: 0,                   // 可选,二维码左上角点纵坐标
    ctx: null,              // 必须,canvas绘制上下文或者canvasID
    ecc: 'H',               // 可选,容错级别,可选值L、M、Q和H(默认)
    size: 200,              // 可选,二维码尺寸,必须为整数。默认为200
    padding: 0,             // 可选,单侧空白边宽度,默认为0
    color: '#000000',       // 可选,二维码颜色,必须是16进制,默认为'#000000'
    background: '#ffffff'   // 可选,二维码背景色,必须是16进制,默认为'#ffffff'    
}

返回值:

  无返回值

效果示例: