uni-app微信小程序canvas中使用canvasToTempFilePath在手机上导出图片尺寸与实际不符

原创已于 2023-09-19 18:52:53 修改 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #uni-app #前端 #javascript

于 2023-09-19 18:52:25 首次发布

文章讨论了微信小程序中图片尺寸不一致的问题，通过使用canvas并结合设备像素比(pixelRatio)进行调整，确保在不同设备上下载图片尺寸的一致性。作者提供了获取设备信息、调整canvas大小以及保存图片到本地的代码示例。

问题描述：比如图片的尺寸是1125*2001像素，这样用微信开发者工具下载下来的图片尺寸是1125*2001像素，用不同的手机去操作，下载出来的图片尺寸都不一样，和原图片尺寸差距很大。

解决方案：canvas写入的时候是按照当前设备像素比（pixelRatio）进行设置的，像素比pixelRatio=物理像素/设备独立像素（dips）

像素比pixelRatio=物理像素/设备独立像素（dips）

ctx.drawImage(图片对象, 图像裁剪的x位置, 图像裁剪的y位置, 裁剪的宽度, 裁剪的高度, x位置, y位置, 宽度, 高度

我这台机器的设备像素比=3，分辨率是:1920*1080 以x轴为例，这里的物理像素=1920，得出设备独立像素=1920/3=640，而canvas这里设置的大小是设备独立像素，所以576的物理像素对应到设备独立像素就是=576/3=192，

微信小程序提供了wx.getSystemInfo获取设备信息，其中pixelRatio就是设备像素比.

canvas写入的时候是按照当前设备像素比（pixelRatio）进行设置的

<button class="btn-link save-link" plain="true" @click="getCanvas">
保存图片
</button>    
<!--  canvas保存图片  -->
<canvas class="share-canvas" canvas-id="canvas" :style="canvasStyle"></canvas>

  data() {
    return {
      posterImg: {
        url: 'https://picsum.photos/1125/2001?random=1',
        width: '1125rpx',
        height: '2001rpx'
      }
    }
  },

computed: {
    canvasStyle() {
      return `width: ${this.posterImg.width}px; height:${this.posterImg.height}px;`
    }
},

methods: {
    getCanvas() {
      uni.showLoading({
        title: '保存中' // 加载转圈显示
      })
      const ctx = uni.createCanvasContext('canvas', this)
      const that = this
      // 获取背景海报详细信息
      uni.getImageInfo({
        src: that.swiper2List[that.current].image,
        success: function(res) {
          // 微信小程序提供了wx.getSystemInfo获取设备信息，其中pixelRatio就是设备像素比
          wx.getSystemInfo({
            success: function(data) {
              // canvas写入的时候是按照当前设备像素比（pixelRatio）进行设置的
              const pixelRatio = data.pixelRatio
              that.posterImg.width = res.width / pixelRatio
              that.posterImg.height = res.height / pixelRatio
              // 绘制背景海报
              ctx.drawImage(res.path, 0, 0, that.posterImg.width, that.posterImg.height)
              that.saveCanvas()
            }
          })
        }
      })
    },
    // 保存canvas为图片
    saveCanvas() {
      const _this = this
      setTimeout(() => {
        uni.canvasToTempFilePath({
          canvasId: 'canvas',
          quality: 1,
          success(result) {
            // 保存在本地
            uni.saveImageToPhotosAlbum({
              filePath: result.tempFilePath,
              success: function() {
                uni.hideLoading()
                uni.showToast({
                  title: '保存成功',
                  icon: 'success',
                  duration: 2000
                })
                console.log('save success')
              },
              fail: () => {
                uni.hideLoading()
                _this.setData({
                  flag: false
                })
              }
            })
          },
          fail: () => {
            uni.hideLoading()
            // 重复请求一次
            _this.saveCanvas()
          }
        })
      }, 200)
    }
  }