转载：

weapp-qrcode-canvas-2d

仓库地址

使用

先在 wxml 文件中，创建绘制的 canvas，并定义好 width, height, id , type ，其中type的值必须为2d

<canvas type="2d" style="width: 260px; height: 260px;" id="myQrcode"></canvas>

安装方法1：直接引入 js 文件

直接引入 js 文件，使用 drawQrcode() 绘制二维码

// 将 dist 目录下，weapp.qrcode.esm.js 复制到项目中。路径根据实际引用的页面路径自行改变

import drawQrcode from ../../utils/weapp.qrcode.esm.js

安装方法2：npm安装

npm install weapp-qrcode-canvas-2d --save

在文件中引入

import drawQrcode from weapp-qrcode-canvas-2d

安装完成后调用

例子1：没有使用叠加图片

const query = wx.createSelectorQuery()
query.select(#myQrcode)
    .fields({
        node: true,
        size: true
    })
    .exec((res) => {
        var canvas = res[0].node

        // 调用方法drawQrcode生成二维码
        drawQrcode({
            canvas: canvas,
            canvasId: myQrcode,
            width: 260,
            padding: 30,
            background: #ffffff,
            foreground: #000000,
            text: 大王顶真帅,
        })

        // 获取临时路径（得到之后，想干嘛就干嘛了）
        wx.canvasToTempFilePath({
            canvasId: myQrcode,
            canvas: canvas,
            x: 0,
            y: 0,
            width: 260,
            height: 260,
            destWidth: 260,
            destHeight: 260,
            success(res) {
                console.log(二维码临时路径：, res.tempFilePath)
            },
            fail(res) {
                console.error(res)
            }
        })
    })

例子2：使用叠加图片(在二维码中加logo)

const query = wx.createSelectorQuery()

query.select(#myQrcode)
    .fields({
        node: true,
        size: true
    })
    .exec(async (res) => {
        var canvas = res[0].node

        var img = canvas.createImage();
        img.src = "/image/logo.png"

        img.onload = function () {
            // img.onload完成后才能调用 drawQrcode方法

            var options = {
                canvas: canvas,
                canvasId: myQrcode,
                width: 260,
                padding: 30,
                paddingColor: #fff,
                background: #fff,
                foreground: #000000,
                text: https://gitee.com/WeiDoctor/weapp-qrcode-canvas-2d,
                image: {
                    imageResource: img,
                    width: 80, // 建议不要设置过大，以免影响扫码
                    height: 80 // 建议不要设置过大，以免影响扫码
                    round: true // Logo图片是否为圆形
                }
            }

            drawQrcode(options)

            // 获取临时路径（得到之后，想干嘛就干嘛了）
            wx.canvasToTempFilePath({
                x: 0,
                y: 0,
                width: 260,
                height: 260,
                destWidth: 600,
                destHeight: 600,
                canvasId: myQrcode,
                canvas: canvas,
                success(res) {
                    console.log(二维码临时路径为：, res.tempFilePath)
                },
                fail(res) {
                    console.error(res)
                }
            })

        };
    })

这里是API

drawQrcode([options])

Type: Object