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