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


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 相关文章推荐
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
基于jQuery的360图片展示实现代码
Jun 14 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
Vue.js组件间通信方式总结【推荐】
Nov 23 Javascript
vue 实现图片懒加载功能
Dec 31 Vue.js
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
php str_replace的替换漏洞
2008/03/15 PHP
PHP开发中常用的8个小技巧
2008/08/27 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
Python简单计算文件MD5值的方法示例
2018/04/11 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
python机器学习库xgboost的使用
2020/01/20 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
销售人员获奖感言
2014/02/05 职场文书
可贵的沉默教学反思
2014/02/06 职场文书
党委班子剖析材料
2014/08/21 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
一文搞懂php的垃圾回收机制
2021/06/18 PHP