微信小程序canvas.drawImage完全显示图片问题的解决-创新互联
问题描述
问题产生
对于微信小程序,canvas处理过程中,dramImage默认图片引用是有残缺的
导入初始项目
打开链接(原官网例子),浏览器唤醒微信开发这工具,打开连接之前需要下载好微信开发者工具,如已安装则直接唤起,没有则会提示下载
目的
通过对canvas绘图过程的修改,或者其样式的修改,达到完全显示,并自适应不同机型的目的
解决方案
准备工作
Page({ data:{ imgSrc: '', // 需要处理图片地址 imgW: '', // canvas 宽度 imgH: '', // canvas 高度 byclear: 1 // 比例,这里将iphon6- 375像素设置为1标准,以便在自适应上的转换 }, onReady() { var that = this // 根据屏幕的宽度计算标准比例值。这里讲375作为标准值 wx.getSystemInfo({ success: function(res) { let byclear = res.screenWidth / 375 that.setData({ byclear }) }, }) }, openAndDraw() { // 选择图片 var that = this wx.chooseImage({ success: (res) => { that.setData({ imgSrc: res.tempFilePaths[0], res }) } }) }, checkwh(e) { // 处理逻辑 } })
标题名称:微信小程序canvas.drawImage完全显示图片问题的解决-创新互联
浏览地址:http://myzitong.com/article/dhjisc.html