微信小程序canvas.drawImage完全显示图片问题的解决


Posted in Javascript onNovember 30, 2018

问题描述

问题产生

对于微信小程序,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 是无法获取图片的高度的,再者小程序里面没有 new Image()这个方法,只能通过标签组件image间接获取,所以我们需要在wxml中插入一个隐藏的标签image,隐藏方法我们设置display:none 或者hidden就可以了,注意不要wx:if, wx:if 不会触发bindload事件。

<image src="{{imgSrc}}" bindload='checkwh' mode='widthFix' hidden/>
<canvas canvas-id="canvasIn" class="canvas"></canvas>

在方法checkwh里面即可获取到图片宽高

checkwh(e){
  // 实际宽度 e.detail.width 高度 e.detail.height
  let whsrc = 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
 let whsrc = e.detail.height / e.detail.width
  // 计算高宽,需要处理图片宽度大于屏幕宽度的时候 对应的canvas比例
 let res = this.data.res 
 let byclear = this.data.byclear
 const ctx = 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宽高大小,已达到完全展示

<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后续代码

因此:

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代码

<canvas canvas-id="canvasIn" class="canvas" style="width:{{imgW}}rpx;height:{{imgH}}rpx;margin:0 auto;zoom:{{imgW > 750 ? 750 / imgW : 1}}"></canvas>

关键js代码

checkwh(e){
 var vhsrc = e.detail.height / e.detail.width
 let res = this.data.res
 let byclear = this.data.byclear
 const ctx = 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
 })
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript脚本语言在网页中的简单应用
May 13 Javascript
IE6不能修改NAME问题的解决方法
Sep 03 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 Javascript
javascript 回到顶部效果的实现代码
Feb 17 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
javascript 闭包详解
Jul 02 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
js中int和string数据类型互相转化实例
Jan 16 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
Dec 29 Javascript
JS封装cavans多种滤镜组件
Feb 15 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 #Javascript
微信小程序实现保存图片到相册功能
Nov 30 #Javascript
js canvas实现写字动画效果
Nov 30 #Javascript
webpack打包多页面的方法
Nov 30 #Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 #Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 #Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 #Javascript
You might like
PHP生成月历代码
2007/06/14 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
php简单实现数组分页的方法
2016/04/30 PHP
php微信开发之关注事件
2018/06/14 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
JavaScript类的写法
2016/09/17 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
python 把列表转化为字符串的方法
2018/10/23 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
python编写俄罗斯方块
2020/03/13 Python
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
2015年母亲节寄语
2015/03/23 职场文书
golang正则之命名分组方式
2021/04/25 Golang
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js
Oracle用户管理及赋权
2022/04/24 Oracle
Nginx安装配置详解
2022/06/25 Servers