已解决
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%的人还看了
相似问题
- C# - Opencv应用(2) 之矩阵Mat使用[矩阵创建、图像显示、像素读取与赋值]
- 基于像素特征的kmeas聚类的图像分割方案
- UE5像素流送详细教程,以及解决黑边和鼠标消失问题
- OpenCV快速入门:像素操作和图像变换
- OpenCV中的像素重映射原理及实战分析
- 世界坐标系,相机坐标系,像素坐标系转换 详细说明(附代码)
- React动态生成二维码和毫米(mm)单位转像素(px)单位
- UE5.0.3版本 像素流送 Pixel Streaming
- python:逐像素处理遥感数据时间序列数据(求时间序列最大值、最大值所对应的索引、最大值所在的时间)
- 经典文献阅读之--RLAD(城市环境中自动驾驶从像素进行强化学习)
猜你感兴趣
版权申明
本文"uni-app微信小程序canvas中使用canvasToTempFilePath在手机上导出图片尺寸与实际不符":http://eshow365.cn/6-13431-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!