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

 更新时间:2018年07月10日 16:05:43   作者:宋体四号  
这篇文章主要介绍了小程序图片剪裁的示例代码,可以通过手势控制旋转缩放移动,也可以点击旋转进行90度旋转,非常具有实用价值,感兴趣的小伙伴们可以参考一下

一个微信小程序图片剪裁组件,可以通过手势控制旋转缩放移动,也可以点击旋转进行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~~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 如何使Chrome控制台支持多行js模式——意外发现

    如何使Chrome控制台支持多行js模式——意外发现

    一直以来,Chrome控制台都缺少象IE调试台那样的多行执行模式,今天意外发现Chrome其实也支持多行模式
    2013-06-06
  • 基于leaflet.js实现修改地图主题样式的流程分析

    基于leaflet.js实现修改地图主题样式的流程分析

    这篇文章主要介绍了基于leaflet.js实现修改地图主题样式的流程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • JavaScript对象解构的用法实例解析

    JavaScript对象解构的用法实例解析

    解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量,下面这篇文章主要给大家介绍了关于JavaScript对象解构用法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-01-01
  • 微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

    微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

    这篇文章主要介绍了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法,结合具体实例形式总结分析了微信小程序页面跳转及列表item项跳转页面的相关操作技巧,需要的朋友可以参考下
    2017-11-11
  • 如何检测JavaScript的各种类型

    如何检测JavaScript的各种类型

    在写js脚本的时候我们必须对一件事保持警惕,就是避免异常的发生。在本篇文章里面,我想谈谈一部分类型检测,有需要的可以参考学习。
    2016-07-07
  • 原生JS实现拖拽位置预览

    原生JS实现拖拽位置预览

    这篇文章主要为大家详细介绍了原生JS实现拖拽位置预览,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • JavaScript实现元素滚动条到达一定位置循环追加内容

    JavaScript实现元素滚动条到达一定位置循环追加内容

    下面小编就为大家分享一篇JavaScript实现元素滚动条到达一定位置循环追加内容,具有很好的参考价值,希望对大家有所帮助
    2017-12-12
  • JS实现获取数组中最大值或最小值功能示例

    JS实现获取数组中最大值或最小值功能示例

    这篇文章主要介绍了JS实现获取数组中最大值或最小值功能,结合实例形式总结分析了javascript获取数组最大值与最小值的三种常见操作技巧,需要的朋友可以参考下
    2019-03-03
  • JS如何输出26个英文字符

    JS如何输出26个英文字符

    这篇文章主要介绍了JS如何输出26个英文字符问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Uniapp如何封装网络请求方法demo

    Uniapp如何封装网络请求方法demo

    这篇文章主要为大家介绍了Uniapp如何封装网络请求方法demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10

最新评论