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

uniApp小程序保存canvas图片

news 来源：原创 2025/5/23 5:37:19

最近写了需求用 canvas 保存 2 张图片叠在一起并保存手机相册先上代码

<wd-button type="primary" class="download-btn" @click="downloadImage">下载图片</wd-button>

<canvas
    canvas-id="mergeCanvas"
    style="position: absolute; left: -9999px; width: 300px; height: 400px"
    width="300"
    height="300"
  ></canvas>
//这里的canvas的dom元素 如果不想展示的话 可以用上面的style

// 下载图片
const downloadImage = async () => {
  uni.getSetting({
    success(res) {
      console.log(res.authSetting, 'res.authSetting')

      if (!res.authSetting['scope.writePhotosAlbum']) {
        uni.authorize({
          scope: 'scope.writePhotosAlbum',
          success() {
            saveImg()
          },
        })
      } else {
        saveImg()
      }
    },
  })
}

// 合并图片方法
const mergeImages = async () => {
  try {
    return new Promise((resolve, reject) => {
      const ctx = uni.createCanvasContext('mergeCanvas', proxy) // 使用 proxy
      // 获取底图信息
      uni.getImageInfo({
        src: 'https://xxx.com',
        success: (baseRes) => {
          const width = 300
          const height = 400
          // 绘制底图
          ctx.drawImage(baseRes.path, 0, 0, width, height)
          // 获取叠加图信息
          uni.getImageInfo({
            src: data.deviceInfo.image,
            success: (overlayRes) => {
              // 绘制叠加图
              ctx.drawImage(overlayRes.path, 55, 105, 187, 187)

              // 添加码牌编号
              ctx.setFontSize(16) // 设置字体大小
              ctx.setFillStyle('black') // 设置字体颜色
              ctx.fillText(`LSF${data.deviceInfo.merchantCodeId}`, width * 0.32, height * 0.74) // 在底部添加码牌编号

              // 执行绘制操作
              setTimeout(() => {
                ctx.draw(false, () => {
                  uni.canvasToTempFilePath({
                    canvasId: 'mergeCanvas',
                    success: (res) => {
                      resolve(res.tempFilePath)
                    },
                    fail: (err) => {
                      reject(err)
                    },
                  })
                })
              }, 100)
            },
            fail: (err) => {
              console.error('叠加图加载失败:', err)
              reject(err)
            },
          })
        },
        fail: (err) => {
          console.error('底图加载失败:', err)
          reject(err)
        },
      })
    })
  } catch (error) {
    console.log(error, 'error')
  }
}

const saveImg = async () => {
  try {
    uni.showLoading({ title: '图片保存中...' })

    const mergedImagePath = await mergeImages()

    // 保存图片到相册
    uni.saveImageToPhotosAlbum({
      filePath: mergedImagePath,
      success: () => {
        uni.showToast({ title: '保存成功', icon: 'success' })
      },
      fail: (err) => {
        console.log(err, 'err')

        if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
          uni.openSetting({
            success(settingdata) {
              if (settingdata.authSetting['scope.writePhotosAlbum']) {
                uni.showToast({
                  title: '您已授权成功，请重新保存',
                  icon: 'success',
                  duration: 2000,
                })
              } else {
                uni.showToast({
                  title: '尚未授权，无法保存海报',
                  icon: 'none',
                  duration: 2000,
                })
              }
            },
          })
        }
      },
      complete: () => {
        uni.hideLoading() // 确保在操作完成后隐藏加载提示
      },
    })
  } catch (error) {
    console.log(error)
    uni.showToast({ title: '图片生成失败', icon: 'none' })
    // uni.hideLoading() // 确保在捕获错误时也隐藏加载提示
  }
}