微信小程序离屏Canvas制作分享海报以及导出思路

最新推荐文章于 2024-01-26 19:24:23 发布

原创最新推荐文章于 2024-01-26 19:24:23 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

博客介绍了在微信小程序中制作分享海报的方法。因canvasToTempFilePath不支持离屏Canvas，所以采用Canvas的toDataURL转base64，再用getFileSystemManager的writeFile将文件写入并预览，还提及会给出大致实现代码。

使用createOffscreenCanvas制作分享海报，但是canvasToTempFilePath不支持离屏Canvas，所以只能通过Canvas的toDataURL转base64，再通过getFileSystemManager中的writeFile将文件写入，再进行预览。

大致实现代码如下【不需要wxml代码】

async drawPoster() {
    const {
      backImg,
      promoImg,
    } = this.data;
    const canvas = wx.createOffscreenCanvas({
      type: '2d',
      width: 750,
      height: 840
    });
    const ctx = canvas.getContext('2d');
    // 绘制背景
    let bgImg = canvas.createImage();
    // 等待图片加载
    await new Promise(resolve => {
      bgImg.onload = resolve;
      bgImg.src = backImg; // 要加载的图片 url
    })
    ctx.drawImage(bgImg, 0, 0, 750, 840);
    // 绘制二维码
    let mycode = canvas.createImage();
    // 等待图片加载
    await new Promise(resolve => {
      mycode.onload = resolve;
      mycode.src = promoImg; // 要加载的图片 url
    })
    // 创建二维码圆形
    ctx.save();
    ctx.arc(568 * dpr, 524, 120, 0, 2 * Math.PI);
    ctx.clip();
    ctx.fillStyle = "#FFF";
    ctx.fill();
    ctx.drawImage(mycode, 458 * dpr, 414, 220, 220);
    ctx.restore();
    const imgData = canvas.toDataURL();
    const time = new Date().getTime();
    const fs = wx.getFileSystemManager();
    const filePath = wx.env.USER_DATA_PATH + "/poster" + time + "share" + ".png";
    fs.writeFile({
      filePath,
      data: imgData.replace(/^data:image\/\w+;base64,/, ""),
      encoding: 'base64',
      success: res => {
        wx.showShareImageMenu({
          path: filePath,
          success: res => {
            console.log(res);
          }
        })
      },
      fail: err => {
        // 此处可能存在内存满了的情况
        // 需要根据具体需求处理
        console.log(err);
      }
    });
    fs.close();
  },