小程序生产海报的两种常见方式

https://developers.weixin.qq.com/community/develop/article/doc/00008c13228078898f2b0bcf751413

在小程序中生成海报分享是比较常见的需求，总结两种可行的方式：

首先canvas推荐使用现在官方主推的定义方式

<canvas type="2d" id="canvas"></canvas>

1、使用网络图片绘制海报

wx.createSelectorQuery().select(`#canvas`)
    .node((res) => {
        // 获取canvas
        const canvas = res.node;
        // 读取context
        const ctx = canvas.getContext('2d');
        // 获取dpr
        let dpr = wx.getSystemInfoSync().pixelRatio;
        // dpr不能大于2，否则可能canvas是白屏
        dpr = dpr > 2 ? 2 : dpr;
        // 根据dpr设置canvas的宽高
        canvas.width = 560 * dpr;
        canvas.height = 780 * dpr;
        // 创建需要绘制的image对象
        const imgObj = canvas.createImage()
        imgObj.src = 'https://wx.qlogo.cn/mmhead/Q3auHgzwzM7rrict8bMueiaOEJP0YJqyxWztIRZLkSVnD9lUdwsvSEXQ/0'
        imgObj.onload = function () {
            // 图片加载完之后也是根据dpr转换尺寸绘制
            ctx.drawImage(imgObj, 0, 0, 560 * dpr, 780 * dpr)
        };
}).exec();

2、使用base64绘制海报

这种情况是不能直接把base64直接复制给image的src，需要使用文件系统转换一下，其他跟使用网络图片的时候一致

// 读取base64数据的图片格式和body
const wxQRCode = 'base64的数据';
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(wxQRCode) || [];
if (format) {
    // 获取微信的文件工具
    const fsm = wx.getFileSystemManager();
    // 定义完整的临时文件路径，wx.env.USER_DATA_PATH是微信文件的根目录
    const filePath = `${wx.env.USER_DATA_PATH}/wxQRCode.${format}`;
    // base64 数据转换为 ArrayBuffer 数据
    const buffer = wx.base64ToArrayBuffer(bodyData);
    // 写入系统空间
    fsm.writeFile({
        filePath: filePath,
        data: buffer,
        encoding: 'binary',
        success: (res) => {
            // 写入成功之后就可以使用临时路径了，后面跟使用网络图片的保持一致
            console.log('写入成功, 路径: ', res, filePath);
            const wxQRCodeObj = canvas.createImage();
            wxQRCodeObj.src = filePath;
            wxQRCodeObj.onload = (res) => {
                console.log('wxQRCodeObj: ', wxQRCodeObj);
                ctx.drawImage(wxQRCodeObj, 0, 0, 430 * dpr, 430 * dpr, 400 * dpr, 620 * dpr, 160 * dpr, 160 * dpr);
            };
        },
        fail: err => {
            console.log(err);
        },
    });
}