uniapp 合成分享图

截屏2021-03-10 下午3.11.43.png

Demo-2021.03.10

先生成二维码本地缓存地址

二维码生成插件

得到地址之后开始绘制分享图

// 合成分享图核心代码
drawShareImg() {
    let that = this
    let ww, hh;
    const ctx = uni.createCanvasContext('myCanvas')
    console.log("--------");
    const query = uni.createSelectorQuery().in(this);
    query.select("#bgCover").boundingClientRect(data => {
        console.log("得到布局位置信息" + JSON.stringify(data));
        ww = data.width; //准确的宽高
        hh = data.height;
        ctx.drawImage("../../static/bgimage.jpg", 0, 0, ww, hh)
        ctx.drawImage("../../static/head-normal.png", 30, hh - 87, 50, 50)
        ctx.drawImage(this.tempSrc, ww - 90, hh - 92, 60, 60)
        ctx.setFontSize(16)
        ctx.setFillStyle('#FFFFFF')
        ctx.fillText('非官方用户', 90, hh - 65)
        ctx.fillText('ID：135487', 90, hh - 43)
        ctx.draw()
        //这里需要做个延迟防止绘制没结束生成图片黑的问题
        setTimeout(() => {
            uni.canvasToTempFilePath({
                canvasId: 'myCanvas',
                success: function(res) {
                    // 在H5平台下，tempFilePath 为 base64
                    console.log(res.tempFilePath)
                }
            })
        }, 1000);
    }).exec();
}

完整代码在github上