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

**问题描述:**比如图片的尺寸是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)
    }
  }
相关推荐
橙某人10 小时前
Vue3 + Pinia 移动端Web应用:页面缓存策略解决方案💡
前端·javascript·vue.js
小Pawn爷10 小时前
构建Django的Web镜像
前端·python·docker·django
Sailing10 小时前
🚀🚀 从前端到AI Agent开发者,只差这一篇入门指南
前端·后端·ai编程
草帽lufei10 小时前
轻松上手WSL安装与使用
linux·前端·操作系统
San3010 小时前
使用 OpenAI API 生成文本与图片:从环境搭建到提示工程完全解析
javascript·人工智能·node.js
TimelessHaze11 小时前
🚀 一文吃透 React 性能优化三剑客:useCallback、useMemo 与 React.memo
前端·javascript·react.js
长存祈月心11 小时前
Rust 迭代器适配器
java·服务器·前端
先树立一个小目标11 小时前
puppeteer生成PDF实践
前端·javascript·pdf
冲刺逆向11 小时前
【js逆向案例二】瑞数6 深圳大学某医院
前端·javascript·vue.js
老师可可11 小时前
成绩发布工具使用方法,附成绩分析教程
学习·信息可视化·小程序·excel·学习方法