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)
    }
  }
相关推荐
vortex54 分钟前
解决 Kali 中 Firefox 下载语言包和插件速度慢的问题:配置国内镜像加速
前端·firefox·腾讯云
修仙的人7 分钟前
Rust + WebAssembly 实战!别再听说,学会使用!
前端·rust
maxine9 分钟前
JS Entry和 HTML Entry
前端
用户633107761236612 分钟前
Who is a Promise?
前端
说私域25 分钟前
技术指数变革下的组织适应性研究:基于定制开发开源AI智能名片S2B2C商城小程序的实践观察
人工智能·小程序·开源
威风的虫43 分钟前
JavaScript中的axios
开发语言·javascript·ecmascript
比老马还六1 小时前
Blockly元组积木开发
前端
笨笨狗吞噬者1 小时前
【uniapp】小程序体积优化,JSON文件压缩
前端·微信小程序·uni-app
bot5556661 小时前
“企业微信iPad协议”静默 72 小时:一台被遗忘的测试机如何成为私域的逃生梯
javascript·面试
西洼工作室1 小时前
浏览器事件循环与内存管理可视化
前端·javascript·css·css3