当前位置：首页 > article >正文

微信小程序生成海报 / 两张图片合并生成一张

article 2025/2/1 6:48:54

一张背景图，一个二维码，生成一张全屏海报，二维码位于右下角（二维码位置可以调整）

方法思路：使用微信小程序的canvas组件

1、获取canvas组件定义一个canvas上下文

2、获取设备信息，将设备宽高设置为canvas画布的大小

3、在图片加载完成后开始绘制，可以调整绘制图片的起始位置坐标以及大小

4、绘制完成后将canvas转成图片

5、下载到图库

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

handleImg() {
    try {
      const query = wx.createSelectorQuery();
      query.select('#myCanvas')
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        const canvas = res[0].node;
        const ctx = canvas.getContext('2d');
        const systemInfo = wx.getSystemInfoSync();
        const dpr = systemInfo.pixelRatio;
        const { windowWidth, windowHeight } = systemInfo
        // 根据设备的像素比 把画布设为全屏
        canvas.width = windowWidth * dpr;
        canvas.height = windowHeight * dpr;
        ctx.scale(dpr, dpr)
        let that = this
        const img = canvas.createImage();
        img.src = '第一张图片的url';
        img.onload = () => {
          const qrcodeImg = canvas.createImage();
          qrcodeImg.src = '第二张图片的url'
          qrcodeImg.onload = () => {
          	// 绘制第一张图片
            ctx.drawImage(img, 0, 0, windowWidth, windowHeight);
            // 绘制第二张图片
            ctx.drawImage(qrcodeImg, windowWidth - 100, windowHeight - 100, 60, 60);
            // 延时保存图片
            setTimeout(() => {
              wx.canvasToTempFilePath({
                canvas,
                destWidth: windowWidth * dpr,
                destHeight: windowHeight * dpr,
                success(res) {
                  console.log('生成的图片路径:', res.tempFilePath);
                  that.saveImageToAlbum(res.tempFilePath)
                },
                fail(err) {
                  console.error('canvasToTempFilePath 保存失败:', err);
              });
            }, 500);
          }
        };
      });
    } catch (err) {
      console.log('trycatch失败',err)
    }
  },
  saveImageToAlbum(filePath) {
    wx.saveImageToPhotosAlbum({
      filePath: filePath,
      success(res) {
        wx.showToast({
          title: '保存成功',
          icon: 'success',
          duration: 2000
        });
      },
      fail(err) {
        console.error('保存失败:', err);
      }
    });
  },