微信小程序使用weapp-qrcode生成二维码并在图层上覆盖一层二维码过期文字

在github搜索weapp-qrcode下载dist中的js文件解压到小程序目录下

通过以下方式引入到js方法中

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

wxml

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

生成二维码js方法

        let that = this
        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: that.data.background,
                foreground: that.data.color,
                text: that.data.content,
            })
            // 获取临时路径（得到之后，想干嘛就干嘛了）
            wx.canvasToTempFilePath({
    
    
                canvasId: 'myQrcode',
                canvas: canvas,
                x: 0,
                y: 0,
                width: 260,
                height: 260,
                destWidth: 260,
                destHeight: 260,
                success(res) {
    
    
                    that.setData({
    
    
                        tempFilePath: res.tempFilePath
                    })
                },
                fail(res) {
    
    
                    console.error(res)
                }
            })
        })

二维码生成效果图如下

下面是在倒计时结束后给二维码添加上一层过期文字
js方法

     var that = this
        wx.createSelectorQuery().select('#myQrcode').fields({
    
    
                node: true,
                size: true,
            })
            .exec((res) => {
    
    
                const canvas = res[0].node
                const ctx = canvas.getContext('2d')
                const dpr = wx.getSystemInfoSync().pixelRatio;
                ctx.scale(dpr, dpr);
                var text = '二维码已过期'
                ctx.fillStyle = 'red'
                ctx.font = "bold 20px serif";
                ctx.fillText(text, 70, 130)
            })

下面是实现的效果图

整个过程就是这样，能力有限希望能帮助到你。