微信小程序canvas.drawImage完全显示图片问题的解决
问题描述
问题产生
对于微信小程序,canvas处理过程中,dramImage默认图片引用是有残缺的
导入初始项目
打开链接(原官网例子),浏览器唤醒微信开发这工具,打开连接之前需要下载好微信开发者工具,如已安装则直接唤起,没有则会提示下载
目的
通过对canvas绘图过程的修改,或者其样式的修改,达到完全显示,并自适应不同机型的目的
解决方案
准备工作
Page({ data:{ imgSrc:'',//需要处理图片地址 imgW:'',//canvas宽度 imgH:'',//canvas高度 byclear:1//比例,这里将iphon6-375像素设置为1标准,以便在自适应上的转换 }, onReady(){ varthat=this //根据屏幕的宽度计算标准比例值。这里讲375作为标准值 wx.getSystemInfo({ success:function(res){ letbyclear=res.screenWidth/375 that.setData({ byclear }) }, }) }, openAndDraw(){//选择图片 varthat=this wx.chooseImage({ success:(res)=>{ that.setData({ imgSrc:res.tempFilePaths[0], res }) } }) }, checkwh(e){ //处理逻辑 } })
获取选择目标图片的宽高度~
默认canvas是无法获取图片的高度的,再者小程序里面没有newImage()这个方法,只能通过标签组件image间接获取,所以我们需要在wxml中插入一个隐藏的标签image,隐藏方法我们设置display:none或者hidden就可以了,注意不要wx:if,wx:if不会触发bindload事件。
在方法checkwh里面即可获取到图片宽高
checkwh(e){ //实际宽度e.detail.width高度e.detail.height letwhsrc=e.detail.height/e.detail.width //计算高宽,需要处理图片宽度小于屏幕宽度的时候对应的canvas比例 }
canvas.scale方案
dramImage绘图方法,我们可以通过对画布的放大缩小scale来完整绘制,继续在checkwh中进行处理.scale缩放比例很简单,我们只要计算出屏幕与图片的实际比例,对应缩小就可。即:375*byclear/e.detail.width这里要带上自适应比例,当然对于图片宽度小于屏幕的我们不做缩放处理
checkwh(e){ //实际宽度e.detail.width高度e.detail.height letwhsrc=e.detail.height/e.detail.width //计算高宽,需要处理图片宽度大于屏幕宽度的时候对应的canvas比例 letres=this.data.res letbyclear=this.data.byclear constctx=wx.createCanvasContext('canvasIn',this); //对画布进行缩放,注意scale两个参数保持一致,即缩放比例都是一样的。保证宽高比一致 if(e.detail.width>375*byclear)ctx.scale(375*byclear/e.detail.width,375*byclear/e.detail.width); ctx.drawImage(res.tempFilePaths[0],0,0,e.detail.width,e.detail.height) ctx.draw() //后续操作 }
上面我们已经完整的将图片绘制到canvas中了,还不够,下面我们将设置设置canvas宽高大小,已达到完全展示
微信自适应单位是rpx,对于iphone6,375px=750rpx=>1px=2rpx;其他型号计算是带上比例byclear即可,然后图片小于屏幕宽度,不做处理,checkwh后续代码
因此:
checkwh(e){ //前面代码... this.setData({ imgW:e.detail.width>375?750:e.detail.width*2/byclear, imgH:e.detail.width>375?750*whsrc:e.detail.height*2/byclear }) }
canvas缩放zoom方案
zoom方案对比scale方案,比较好的地方在于,不用计算canvas的大小,也不用缩放比例,直接将原图的宽高设置成canvas的宽高,然后,通过zoom对canvas进行缩放,直接放代码额,这里的缩放比例,即为图片宽度/750,注意这里不需要比例计算,css样式会自动进行样式比率计算
关键wxml代码
750?750/imgW:1}}">
关键js代码
checkwh(e){ varvhsrc=e.detail.height/e.detail.width letres=this.data.res letbyclear=this.data.byclear constctx=wx.createCanvasContext('canvasIn',this); ctx.drawImage(res.tempFilePaths[0],0,0,e.detail.width,e.detail.height) ctx.draw() this.setData({ imgW:e.detail.width*2/byclear, imgH:e.detail.height*2/byclear }) },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。