当前位置:首页 > 编程笔记 > 正文
已解决

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

来自网友在路上 160860提问 提问时间:2023-09-25 11:35:12阅读次数: 60

最佳答案 问答题库608位专家为你答疑解惑

问题描述:比如图片的尺寸是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.pixelRatiothat.posterImg.width = res.width / pixelRatiothat.posterImg.height = res.height / pixelRatio// 绘制背景海报ctx.drawImage(res.path, 0, 0, that.posterImg.width, that.posterImg.height)that.saveCanvas()}})}})},// 保存canvas为图片saveCanvas() {const _this = thissetTimeout(() => {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)}}
查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"uni-app微信小程序canvas中使用canvasToTempFilePath在手机上导出图片尺寸与实际不符":http://eshow365.cn/6-13431-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!