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


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 相关文章推荐
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
JavaScript中定义函数的三种方法
Mar 12 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 Javascript
原生js实现随机点名功能
Nov 05 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 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
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
PHP实现获取某个月份周次信息的方法
2015/08/11 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
javascript 禁止复制网页
2009/06/11 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
jquery提示效果实例分析
2014/11/25 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
python+mysql实现简单的web程序
2014/09/11 Python
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
python抓取网页中图片并保存到本地
2015/12/01 Python
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
Python学习思维导图(必看篇)
2017/06/26 Python
Java及python正则表达式详解
2017/12/27 Python
Python二维码生成识别实例详解
2019/07/16 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
承认错误的检讨书
2014/01/30 职场文书
房产委托公证书样本
2014/04/04 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书