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


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 相关文章推荐
Extjs入门之动态加载树代码
Apr 09 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
详解jQuery选择器
Dec 21 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
微信小程序实现拍照和相册选取图片
May 09 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
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
一个php作的文本留言本的例子(一)
2006/10/09 PHP
php中常用的预定义变量小结
2012/05/09 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
JS input 数字验证代码
2009/07/30 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
python读写文件操作示例程序
2013/12/02 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
python使用psutil模块获取系统状态
2016/08/27 Python
用python制作游戏外挂
2018/01/04 Python
python3 map函数和filter函数详解
2019/08/26 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
StubHub德国:购买和出售门票
2017/09/06 全球购物
图书馆志愿者活动总结
2014/06/27 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
感谢信模板大全
2015/01/23 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
MySQL 5.7常见数据类型
2021/07/15 MySQL
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python