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


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 表格操作(交替显示、拖动表格行、选择行等)
Jul 29 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
兼容IE和FF的图片上传前预览js代码
May 28 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
基于编写jQuery的无缝滚动插件
Aug 02 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
Jun 10 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
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
PHP检测用户语言的方法
2015/06/15 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
Javascript Tab 导航插件 (23个)
2009/06/11 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
收集的10个免费的jQuery相册
2011/02/26 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
python selenium操作cookie的实现
2020/03/18 Python
详解Python 循环嵌套
2020/07/09 Python
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
JPA的特点
2014/10/25 面试题
社团活动策划书范文
2014/01/09 职场文书
大学生涯自我鉴定
2014/01/16 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
个人催款函范文
2015/06/23 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL