uniApp小程序保存canvas图片

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

javascript 复制代码
<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() // 确保在捕获错误时也隐藏加载提示
  }
}

代码看起来没问题 但上线后就下载不了 体验版可以下载 找了很久 发现 需要去设置一下微信小程序的用户隐私保护指引

这里显示已更新就行 没有处理的 需要先处理一下 才能发起权限

相关推荐
腾讯TNTWeb前端团队3 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰6 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪7 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪7 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy7 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom8 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom8 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom8 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom8 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom8 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试