深圳设计网站排行,软文之家,电子商务网站建设前景,nginx rewrite wordpress问题描述#xff1a;比如图片的尺寸是1125*2001像素#xff0c;这样用微信开发者工具下载下来的图片尺寸是1125*2001像素#xff0c;用不同的手机去操作#xff0c;下载出来的图片尺寸都不一样#xff0c;和原图片尺寸差距很大。
解决方案#xff1a;canvas写入的时候是…问题描述比如图片的尺寸是1125*2001像素这样用微信开发者工具下载下来的图片尺寸是1125*2001像素用不同的手机去操作下载出来的图片尺寸都不一样和原图片尺寸差距很大。
解决方案canvas写入的时候是按照当前设备像素比pixelRatio进行设置的像素比pixelRatio物理像素/设备独立像素dips 像素比pixelRatio物理像素/设备独立像素dips ctx.drawImage(图片对象, 图像裁剪的x位置, 图像裁剪的y位置, 裁剪的宽度, 裁剪的高度, x位置, y位置, 宽度, 高度 我这台机器的设备像素比3分辨率是:1920*1080 以x轴为例这里的物理像素1920得出设备独立像素1920/3640而canvas这里设置的大小是设备独立像素所以576的物理像素对应到设备独立像素就是576/3192
微信小程序提供了wx.getSystemInfo获取设备信息其中pixelRatio就是设备像素比.
canvas写入的时候是按照当前设备像素比pixelRatio进行设置的
button classbtn-link save-link plaintrue clickgetCanvas
保存图片
/button
!-- canvas保存图片 --
canvas classshare-canvas canvas-idcanvas :stylecanvasStyle/canvas data() {return {posterImg: {url: https://picsum.photos/1125/2001?random1,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)}}
