原生微信小程序如何将多张图片通过canvas生成一张图片

玛卡噶卡

已于 2023-12-06 17:22:57 修改

阅读量572

点赞数 1

文章标签：微信小程序小程序

于 2023-12-06 17:19:04 首次发布

本文链接：https://blog.youkuaiyun.com/m0_57606222/article/details/134836438

版权

1.data中定义图片数组，存放多张图片，

src: [
      { name: 'bg', val: 'https://xxxxxxxxx' },
      { name: 'head', val: 'https://xxxxxxxxx' },
    ],

2.通过api获取图片的临时路径

async loadImage() {
    const list = []
    for (let i = 0; i < this.data.src.length; i++) {
      const res = await wx.getImageInfo({ src: this.data.src[i].val })
      list.push({ name: this.data.src[i].name, val: res.path })
    }
    return list
  },

3.获取到临时路径后开始绘制canvas,此处为了将背景图跟头像得宽高区分开来，所以我设置了name来区分，到时候可以根据自己的需求去改动，我这里图片的宽度是按照设备的宽度来的，可自行修改。

ctx.draw 方法就是最后一步，绘制完后页面会生成图片并返回临时路径，最后通过saveImagetoPhotosAlbum 就可以保存到相册了~~~~~

async draw(list) {
    const ctx = wx.createCanvasContext('canvas')
    list.map((item) => {
      if (item.name == 'bg') {
        ctx.drawImage(
          this.data.src[0].val,
          0,
          0,
          this.data.info.screenWidth,
          700
        )
      } else {
        ctx.drawImage(this.data.src[1].val, 0, 0, 100, 100)
      }
    })
    ctx.draw(false, () => {
      wx.canvasToTempFilePath({
        canvasId: 'canvas',
      }).then((res) => {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: function (res) {
            console.log(res)
          },
        })
      })
    })
  },

4.最后贴一下wxml代码，示例代码中得路径是写死的，记得修改，去渲染data中定义得路径~~，

基本上复制粘贴就可以运行了，更多canvas API可以去看官方文档~~

<view class="content">
  <image src="https://xxxxx" mode="widthFix" class="bg" />
  <image src="https:/xxxxxx" class="qrCode" />
  <canvas canvas-id="canvas" class="roate-img" class="canvas"></canvas>

  <view class="share-btn" bindtap="submit">

  </view>
</view>