问题描述：比如图片的尺寸是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)}}
》)
