微信小程序绘图实现图片拉伸,裁剪与压缩的方法,亲测使用实用
注意:本文转载自https://blog.csdn.net/vivian_jay/article/details/68933161
一、canvas绘图API
工欲善其事;必先利其器。
隆重请出主角:canvas绘图函数drawImage(),酱酱酱~
它能做什么:
1. 绘制图像:将加载的图像绘制到canvas上;
2. 绘制画布:将画好的一个canvas画到另一个canvas上;
3. 绘制视频:差不多就是用来视频截图,哇(@ο@) 好厉害。
怎么做(敲黑板:今天只教绘制图像啊,老师没备课):
1. 获取图片
//1. 可以直接获取DOM元素
var img = document.getElementById("imgId")
//2. 或者新建一个
var img = new Image()
img.src = "imgsrc.jpg"
- 1
- 2
- 3
- 4
- 5
- 获取canvas上下文
//1. 获取画布
var canvas = document.getElementById("canvasId")
//2. 获取画布上下文
var ctx = canvas.getContext("2d")
- 1
- 2
- 3
- 4
- 在上下文画画!
img.onload = function(){ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
}
- 1
- 2
- 3
参数释义:
drawImage有三种添加参数的情况,如下:
- 只规定原始图片开始剪切的位置,默认填充剩余宽高到画布上:
drawImage(img,sx,sy)
- 1
- 从指定位置裁剪原始图片指定宽高,填充到画布上:
drawImage(img,sx,sy,swidth,sheight)
- 1
- 从指定位置裁剪原始图片指定宽高,从指定位置开始显示到画布上指定宽高:
drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
- 1
这里盗个图解释一下:
二、拉伸并图片
原始图片的宽高较之显示区域较小,就需要美美地拉伸一下。
1. 原始图片宽高均小于显示区域
默认情况下会将原始图片的宽高都扯开成刚好铺满画布。这个就不管了,让它自由填充吧,freedom~
2. 原始图片仅宽度小于显示区域:黄色img,蓝色canvas
默认情况会将图片宽度拉伸,高度压缩,图片会被压得很~扁~
思路:将原始图片宽度拉开成现实区域宽度,而将高度等比例拉开,并且将超出部分上下各剪裁一半。
函数参数设置如下:
ctx.drawImage(img, 0, (h - 200/dw)/2, w, 200/dw, 0, 0, 300, 200)
- 1
3.原始图片仅高度小于显示区域:
默认情况会将图片高度拉伸,宽度压缩,图片内容会被挤得很~细~
思路:将原始图片高度拉开成现实区域宽度,而将宽度等比例拉开,并且将超出部分左右各剪裁一半。
参数设置如下:
ctx.drawImage(img, (w - 300/dh)/2, 0, 300/dh, h, 0, 0, 300, 200)
- 1
三、压缩并裁剪图片
原始图片的宽高较之显示区域较大,就需要小小地压缩一下。
基本思路:在原始图片的宽高均大于显示区域时,首先需要确定我们以宽/高中的哪一个为基准进行压缩,因此需要计算原始图片的宽/高与显示区域的宽/高的比例,以比例高(也就是相差小)的那个作为基准,等比例压缩后相差多的那个需要裁减掉一部分。
1. dw < dh
默认情况会将图片高度、宽度分别按各自的比例压缩,图片内容会被拉得很~扁~
思路:将原始图片宽度压缩成现实区域宽度,而将高度等比例拉开,并且将超出部分上下各剪裁一半。【同拉伸情况2】
函数参数设置如下:
ctx.drawImage(img, 0, (h - 200/dw)/2, w, 200/dw, 0, 0, 300, 200)
- 1
2. dh < dw
默认情况会将图片高度、宽度按各自比例压缩,图片内容会被挤得很~细~
思路:将原始图片高度拉开成现实区域宽度,而将宽度等比例拉开,并且将超出部分左右各剪裁一半。【同拉伸情况3】
参数设置如下:
ctx.drawImage(img, (w - 300/dh)/2, 0, 300/dh, h, 0, 0, 300, 200)
- 1
四、小结
其实不管是先拉伸再裁剪还是先压缩再裁剪,基本思想都是一样的:把图片从默认的填充比例中拯救出来,让它能等比例地变换大小,避免被奇怪的缩放比例搞得颜值比较奇怪。本文中的默认情况均是指直接使用img标签上传图片的情况,相当于:
ctx.drawImage(img,0,0,w,h,0, 0, 300, 200)
- 1
划重点!上文中的代码综合如下:
var canvas = $(".good-img")[0]
var ctx = canvas.getContext("2d")
var img = new Image()
img.src = "images/3.jpg"
img.onload = function () {var w = img.widthvar h = img.heightvar dw = 300/w //canvas与图片的宽高比var dh = 200/hvar ratio // 裁剪图片中间部分if(w > 300 && h > 200 || w < 300 && h < 200){if (dw > dh) {ctx.drawImage(img, 0, (h - 200/dw)/2, w, 200/dw, 0, 0, 300, 200)} else {ctx.drawImage(img, (w - 300/dh)/2, 0, 300/dh, h, 0, 0, 300, 200)}}// 拉伸图片else{if(w < 300){ctx.drawImage(img, 0, (h - 200/dw)/2, w, 200/dw, 0, 0, 300, 200)}else {ctx.drawImage(img, (w - 300/dh)/2, 0, 300/dh, h, 0, 0, 300, 200)}}
}
微信小程序绘图实现图片拉伸,裁剪与压缩的方法,亲测使用实用相关推荐
- 微信小程序开发文档和开发工具放出破解版-亲测可用
废话不多说,直接上衔接 1,微信小程序开发文档 现阶段最全的开发文档了 http://wxopen.notedown.cn/api/notice.html 2,开发工具 https://github. ...
- 微信小程序-如何实现input框输入emoji表情?【亲测有效】
- 微信小程序-如何实现实现横纵滚动轴?【亲测有效】
- 微信小程序怎么实现 图片按住一角缩放、旋转、拖拽
微信小程序怎么实现 图片按住一角缩放.旋转.拖拽 图片一角可以加个小图片,按住来操作 利用movable-view.movable-area 可以实现拖拽缩放.不好旋转 是不是可以利用canvas绘图 ...
- 微信小程序后台获取签名,裁剪并上传图片至阿里云oss
微信小程序后台获取签名,裁剪并上传图片至阿里云oss 首先,设置微信开发者工具,选择校验合法域名,防止本地可应使用,线上报错问题: 其次,在微信公众平台–小程序开发,设置合法域名 Oss设置–> ...
- 微信小程序中的图片处理
微信小程序中的图片处理 微信小程序中的<image></image>用于向页面中插入图片.有两个重要的属性 1.src 要插入图片的资源地址 2.mode 图片裁剪.缩放 ...
- 详解 - 解决微信小程序分享功能图片比例问题 - 全局分享
前言: 我在我的博客小程序使用微信小程序分享功能 图片不符合5:4问题 ,对其原理 扫描下面二维码,可以体验哦 准备 在需要自定义分享的页面 设置canvas 组件 目录 准备 详解思路 定义总函数 ...
- 微信小程序内拖动图片实现移动、放大、旋转
最近接到一个任务,在微信小程序内拖动图片组件实现移动.放大.旋转,并记录这些图片的移动位置,放大比例,旋转角度,在一个画布上生成一张图片,最后保存到手机相册. 我的具体实现思路是这样的:(文章底部留有 ...
- 微信小程序分享时,封面图片裁剪为5:4
微信小程序分享时,封面图片裁剪为5:4 直接贴代码: //裁剪分享的图片为5:4 //传入图片地址cutShareImg:function(imgurl){let that=this;wx.getIm ...
最新文章
- Java培训深度学习都要学什么
- 用jquery验证用户名是否有效或重复
- 怎样用python自动化办公_会python基础,如何学习自动化办公?
- html 文本强调,CSS Emphasis Marks 文本强调标记
- Bzoj1312 / POJ3155 Neerc2006 Hard Life
- 超详细!百度富媒体检索比对系统的关键技术
- Google Nexus5在linux下刷原生安卓 android6.0
- Windows 故障转移+Hyper-V 虚机自动迁移高 可用
- 人为什么会出轨?麻省理工学院告诉你:男女配对的真相
- 数据特征分析-相关性分析
- poj 1182 食物链的一种解法(详解),非向量法
- 负载报服务器无响应,nodejs HTTP服务器无法在高负载下处理大量响应
- 从零开始造一个“智障”聊天机器人
- java线上诊断工具,Java线上诊断神器Arthas-1
- SQL*Plus环境下创建PLUSTRACE角色
- 温故知新----css布局
- codeblocks解决网络方面错误undefined reference to `inet_ntoa@4'|
- 敏捷开发 建立愿景、使命_使用愿景板创建敏捷产品策略的10条技巧
- Taro 3 正式版发布!京东推出开放式跨端跨框架方案,这些React、Nerv、Vue、jQuey都能支持上了!...
- OpenCV.反阈值二值化
热门文章
- 闪亮的玻璃图标悬浮导航栏效果
- 富士最快计算机,高速处理 富士推出X RAW STUDIO转换软件
- 软件测试用例设计方法-因果图法
- 网易见外不能用?自动生成字幕,免费快速上字幕, 自动加字幕!自动加字幕!视频字幕自动生成 语音转换字幕 极速上字幕
- Linux 部署RabbitMQ 启动报错 ERROR: epmd error for host www: timeout (timed out)
- QT做类似QQ截图功能(带图片编辑功能)
- android 加载谷歌地图,Android调用google地图生成路线图实现代码
- DELPHI 内存流修改16进制文件, 文件太大时候OutofMemory的问题研究
- 计算机专业中专有哪些,计算机中专技校有哪些专业
- 兰亭集势:颠覆福特生产模式的电子商务公司