小程序图片剪裁加旋转的示例代码


Posted in Javascript onJuly 10, 2018

一个微信小程序图片剪裁组件,可以通过手势控制旋转缩放移动,也可以点击旋转进行90度旋转,先看下效果(视屏不知道为啥用不了,上个压缩过度的GIF先):

小程序图片剪裁加旋转的示例代码

图片剪裁毫无疑问用的是canvas,但是开发过小程序的同学应该了解小程序canvas的一些坑。比如小程序canvas的设定了画布的大小后不能像web的canvas那样通过css样式来调整画布在手机上显示的大小、还有canvas不能设置太大因为可能会在某些安卓机上导致小程序崩溃、canvas绘制过大的图片会让小程序变得非常卡顿等等。

网上能找到的图片剪裁框架大多采用在canvas上面直接绘制图片,然后通过监听canvas上的用户手势来控制图片移动旋转等,这样截出来的图片会出现模糊的问题,因为canvas的太小了。一种解决方法是,在页面上再放置一个隐藏的canvas大小设为原来的两倍或者再大一点也行用来作为实际剪裁图片的canvas,当然剪裁数据都是从第一个canvas那里来的。但是这样还是有些小问题,就是canvas绘制大的图片会出现卡顿的问题,这种方案在监听用户手势的变化的时候要不停的重新绘制canvas,卡顿变得更加严重,体验非常不好。

基于上面原因,我采用的是view里面放置图片,监听view上面的手势,通过css样式控制图片的旋转、缩放和移动,最后剪裁用隐藏的canvas。先看下页面布局:

<view class="container">
 <!-- 剪裁框与初始图片,剪裁框监听用户手势,获取移动缩放旋转值,images通过css样式显示变化 -->
 <view class="img" style="width:{{ width }}px; height:{{height}}px" catchtouchstart="touchstartCallback" catchtouchmove="touchmoveCallback" catchtouchend="touchendCallback" >
  <image style="transform: translate({{stv.offsetX}}px, {{stv.offsetY}}px) scale({{stv.scale}}) rotate({{ stv.rotate }}deg);width:{{originImg.width}}px; height: {{originImg.height}}px" src="{{ originImg.url }}"></image>
 </view>
 <view class='footer'>
   <view bindtap='uploadTap'>选择图片</view> 
   <view bindtap='rotate'>旋转</view>
   <view bindtap='cropperImg'>剪裁</view>
 </view>

 <!-- canvas长宽设为初始图片设置的长款的两倍,使剪裁得到的图片更清晰,也不至于过大 -->
 <canvas class='imgcrop' style="width:{{ width * 2 }}px;height:{{ height * 2}}px;" canvas-id='imgcrop'></canvas>
</view>

最重要的操作是图片在view中的位置变化如何在canvas中保持一致再剪裁出来,图片相对与view中的左上角坐标、图片的长度和宽度我们都是知道的,还有旋转值通过用户手势变化计算出来,旋转的时候将画布的中心移动到图片的中心点再旋转就行了。

let ctx = wx.createCanvasContext('imgcrop',this);
   let cropData = _this.data.stv;
   ctx.save();
   // 缩放偏移值
   let x = (_this.data.originImg.width - _this.data.originImg.width * cropData.scale) / 2;
   let y = (_this.data.originImg.height - _this.data.originImg.height * cropData.scale) / 2;

   //画布中点坐标转移到图片中心
   let movex = (cropData.offsetX + x) * 2 + _this.data.originImg.width * cropData.scale;
   let movey = (cropData.offsetY + y) * 2 + _this.data.originImg.height * cropData.scale;
   ctx.translate(movex, movey);
   ctx.rotate(cropData.rotate * Math.PI / 180);
   ctx.translate(-movex, -movey);
   
   ctx.drawImage(_this.data.originImg.url, (cropData.offsetX + x) * 2, (cropData.offsetY + y) * 2, _this.data.originImg.width * 2 * cropData.scale, _this.data.originImg.height * 2 * cropData.scale);
   ctx.restore();

查看完整代码请移步到:https://github.com/yuanwyj/Mini-Program-cropper, 喜欢的画点个start~~

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

Javascript 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
jQuery 处理表单元素的代码
Feb 15 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
Vue之Watcher源码解析(1)
Jul 19 Javascript
Vue基于NUXT的SSR详解
Oct 24 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 #Javascript
Vue脚手架的简单使用实例
Jul 10 #Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 #Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 #Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 #Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 #Javascript
ng-alain表单使用方式详解
Jul 10 #Javascript
You might like
PHP4实际应用经验篇(8)
2006/10/09 PHP
php图片验证码代码
2008/03/27 PHP
PHP页面间传递参数实例代码
2008/06/05 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
微信API接口大全
2015/04/15 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
js图片轮播手动切换效果
2015/11/10 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
PHP webshell检查工具 python实现代码
2009/09/15 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
Python管理Windows服务小脚本
2018/03/12 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
python文件操作的简单方法总结
2019/11/07 Python
python输出pdf文档的实例
2020/02/13 Python
python中wx模块的具体使用方法
2020/05/15 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
优衣库台湾官网:UNIQLO台湾
2019/02/01 全球购物
暑假安全保证书
2015/02/28 职场文书
学习与创新自我评价
2015/03/09 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL