<强>
<强>问题产生
对于微信小程序,帆布处理过程中,dramImage默认图片引用是有残缺的
<>强导入初始项目
打开链接(原官网例子),浏览器唤醒微信开发这工具,打开连接之前需要下载好微信开发者工具,如已安装则直接唤起,没有则会提示下载
通过对画布绘图过程的修改,或者其样式的修改,达到完全显示,并自适应不同机型的目的
<强>准备工作
页面({
数据:{
imgSrc:“,//需要处理图片地址
imgW:“,//帆布宽度
imgH:“,//帆布高度
byclear: 1//比例,这里将iphon6 - 375像素设置为1标准,以便在自适应上的转换
}，>
& lt;图像src=" https://www.yisu.com/zixun/{{imgSrc}}”bindload=癱heckwh”模式=' widthFix隐藏/比;
& lt;帆布canvas-id=癱anvasIn”class=盎肌弊４? lt;/canvas>
之前
在方法checkwh里面即可获取到图片宽高
checkwh (e) {//实际宽度e.detail.width高度e.detail.height
让whsrc=https://www.yisu.com/zixun/e.detail.height e.detail.width//计算高宽,需要处理图片宽度小于屏幕宽度的时候对应的帆布比例
}
之前
<强>画布。规模方案
<代码> dramImage 绘图方法,我们可以通过对画布的放大缩小<代码> 规模来完整绘制,继续在checkwh中进行处理。规模缩放比例很简单,我们只要计算出屏幕与图片的实际比例,对应缩小就可。即:<代码> 375 * byclear/e.detail.width 这里要带上自适应比例,当然对于图片宽度小于屏幕的我们不做缩放处理
checkwh (e) {//实际宽度e.detail.width高度e.detail.height
让whsrc=https://www.yisu.com/zixun/e.detail.height e.detail.width//计算高宽,需要处理图片宽度大于屏幕宽度的时候对应的帆布比例
让res=this.data.res
让byclear=this.data.byclear
const ctx=天气。createCanvasContext (“canvasIn”,这个);//对画布进行缩放,注意规模两个参数保持一致,即缩放比例都是一样的。保证宽高比一致
如果(e.detail.width比;375 * byclear ctx)。规模(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 ()//后续操作
}
之前
上面我们已经完整的将图片绘制到画布中了,还不够,下面我们将设置设置帆布宽高大小,已达到完全展示
代码如下:& lt;帆布canvas-id=癱anvasIn”类=盎肌弊４? lt;/canvas>
微信自适应单位是rpx,对于iphone 6, 375 px=750 rpx=比;1 px=2 rpx;其他型号计算是带上比例byclear即可,然后图片小于屏幕宽度,不做处理,checkwh后续代码
因此:
checkwh (e) {//前面代码……
this.setData ({
imgW: e.detail.width比;375 & # 63;750:e.detail.width * 2/byclear,
imgH: e.detail.width比;375 & # 63;750 * whsrc: e.detail.height * 2/byclear
}）
}
之前
<强>帆布缩放放大方案
变焦方案对比规模方案,比较好的地方在于,不用计算画布的大小,也不用缩放比例,直接将原图的宽高设置成画布的宽高,然后,通过放大对画布进行缩放,直接放代码额,这里的缩放比例,即为<代码>图片宽度/750,注意这里不需要比例计算,css样式会自动进行样式比率计算
关键wxml代码
代码如下:& lt;帆布canvas-id=癱anvasIn”类=盎肌弊４? lt;/canvas>
关键js代码
checkwh (e) {
var/e.detail.width vhsrc=https://www.yisu.com/zixun/e.detail.height
让res=this.data.res
让byclear=this.data.byclear
const ctx=天气。createCanvasContext (“canvasIn”,这个);
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
}）
}，
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
