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


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右键菜单contextMenu使用实例
Sep 28 Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 Javascript
详解javascript中的事件处理
Nov 06 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
vue无限轮播插件代码实例
May 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
php设计模式 Facade(外观模式)
2011/06/26 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
Python函数返回值实例分析
2015/06/08 Python
获取Django项目的全部url方法详解
2017/10/26 Python
python调用API实现智能回复机器人
2018/04/10 Python
对python中return与yield的区别详解
2020/03/12 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
HTML5标签小集
2011/08/02 HTML / CSS
支教自我鉴定
2014/01/18 职场文书
采购部经理岗位职责
2014/02/10 职场文书
大二学习计划书范文
2014/04/27 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
手术室护士个人总结
2015/02/13 职场文书
高一英语教学反思
2016/03/03 职场文书