问题描述问题产生对于微信小程序,canvas处理过程中,dramImage默认图片引用是有残缺的 导入初始项目打开链接(原官网例子),浏览器唤醒微信开发这工具,打开连接之前需要下载好微信开发者工具,如已安装则直接唤起,没有则会提示下载 目的通过对canvas绘图过程的修改,或者其样式的修改,达到完全显示,并自适应不同机型的目的 解决方案准备工作
获取选择目标图片的宽高度~默认canvas 是无法获取图片的高度的,再者小程序里面没有 new Image()这个方法,只能通过标签组件image间接获取,所以我们需要在wxml中插入一个隐藏的标签image,隐藏方法我们设置display:none 或者hidden就可以了,注意不要wx:if, wx:if 不会触发bindload事件。
canvas.scale 方案dramImage 绘图方法,我们可以通过对画布的放大缩小scale来完整绘制,继续在checkwh中进行处理.scale缩放比例很简单,我们只要计算出屏幕与图片的实际比例,对应缩小就可。即:375 * byclear / e.detail.width 这里要带上自适应比例,当然对于图片宽度小于屏幕的我们不做缩放处理
上面我们已经完整的将图片绘制到canvas中了,还不够,下面我们将设置设置canvas宽高大小,已达到完全展示 <canvas canvas-id="canvasIn" class="canvas" style="width:{{imgW}}rpx;height:{{imgH}}rpx;margin:0 auto;"> </canvas>
微信自适应单位是rpx,对于iphone 6 ,375px = 750rpx => 1px = 2rpx; 其他型号计算是带上比例byclear即可,然后图片小于屏幕宽度,不做处理,checkwh后续代码
canvas 缩放 zoom 方案
zoom方案对比scale方案,比较好的地方在于,不用计算canvas的大小,也不用缩放比例,直接将原图的宽高设置成canvas的宽高,然后,通过zoom对canvas进行缩放,直接放代码额,这里的缩放比例,即为 图片宽度 / 750,注意这里不需要比例计算,css样式会自动进行样式比率计算 <canvas canvas-id="canvasIn" class="canvas" style="width:{{imgW}}rpx;height:{{imgH}}rpx;margin:0 auto;zoom:{{imgW > 750 ? 750 / imgW : 1}}"></canvas> 关键js代码
|
微信小程序 关于【canvas.drawImage 】完全显示图片问题
发布:2018-12-03 10:02浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08