canvas离屏画布，两张图片合成并下载

源码地址

于 2024-04-24 16:01:48 发布

阅读量149

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_41200621/article/details/138161790

版权

 <view style="width: 100%; height: 750rpx; position: absolute; left: -9999px; top: -9999px;">
      <canvas type="2d" id="myCanvas" class="canvas"></canvas>
    </view>

 openDialog() {
    const that = this
    this.setData({
      show: true
    })
    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 dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.scale(dpr, dpr);
        // 加载大图
        const img1 = canvas.createImage()
        img1.src = '../../static/image/ShareQRCode.png'
        img1.onload = () => {
          ctx.drawImage(img1, 0, 0, res[0].width, res[0].height)
          // 加载小图
          const img2 = canvas.createImage()
          img2.src = '../../static/icon/headSculpture.png'
          img2.onload = () => {
            // 计算小图的位置和大小，使其铺满画布的一部分
            const imgWidth = (res[0].width / 2) - 30 // 小图宽度为画布宽度的一半
            const imgHeight = (res[0].height / 2) - 60 // 小图高度为画布高度的一半
            const imgX = (res[0].width - imgWidth) / 2 // 小图在水平方向居中
            const imgY = ((res[0].height - imgHeight) / 2) + Number(30) // 小图在垂直方向居中
            ctx.drawImage(img2, imgX, imgY, imgWidth, imgHeight) // 在计算出的位置绘制小图
            wx.canvasToTempFilePath({
              x: 0,
              y: 0,
              width: canvas.width,
              height: canvas.height,
              destWidth: canvas.width,
              destHeight: canvas.height,
              canvas: canvas,
              success: function (res) {
                console.log('生成的临时图片路径:', res.tempFilePath) //生成的临时图片路径
                that.setData({
                  ShareQRCode: res.tempFilePath
                })
              },
              fail(err) {
                console.log('生成的临时图片路径失败：', err);
              }
            })
          }
        }
      })
  },