基于Vue怎么实现移动端图片裁剪组件功能

今天小编给大家分享一下基于Vue怎么实现移动端图片裁剪组件功能的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。先看看效果：　
　
　　一、组件的初始化参数　　1、图片img（url或者base64 data-url）　　2、截图的宽clipperImgWidth　　3、截图的高clipperImgHeight　　二、布局　　在Z轴方向看主要是由4层组成。第1层是一个占满整个容器的canvas（称cCanvas）；第2层是一个有透明度的遮罩层；第3层是裁剪的区域（示例图中的白色方框），里面包含一个与裁剪区域大小相等的canvas（称pCanvas）；第4层是一个透明层gesture-mask，用作绑定touchstart，touchmove，touchend事件。其中两个canvas都会加载同一张图片，只是起始坐标不一样。为什么需要两个canvas？因为想做出当手指离开屏幕时，裁剪区域外的部分表面会有一个遮罩层的效果，这样能突出裁剪区域的内容。　　三、初始化canvas　　canvas绘制的图片在hdpi显示屏上会出现模糊，具体原因这里不作分析，可以参考下这里。我这里的做法是让canvas的width与height为其css width/height的devicePixelRatio倍，以及调用canvas api时所传入的参数都要乘以window.devicePixelRatio。最后还要记录一下两个canvas坐标原点的x, y差值（originXDiff与originYDiff）。如下　　四、加载图片　　加载图片比较简单，首先是创建一个Image对象并监听器onload事件（因为加载的图片有可能是跨域的，因此要设置其crossOrigin属性为Anonymous，然后服务器上要设置Access-Control-Allow-Origin响应头）。加载的图片如果宽高大于容器的宽高，要对其进行缩小处理。最后垂直水平居中显示()（这里注意的是要保存图片绘制前的宽高值，因为日后缩放图片是以该值为基础再乘以缩放倍率，这里取imgStartWidth，imgStartHeight）如下　　五、绘制图片　　下面的_drawImage有四个参数，分别是图片对应cCanvas的x，y坐标以及图片目前的宽高w，h。函数首先会清空两个canvas的内容，方法是重新设置canvas的宽高。然后更新组件实例中对应的值，最后再调用两个canvas的drawImage去绘制图片。对于pCanvas来说，其绘制的图片坐标值为x，y减去对应的originXDiff与originYDiff（其实相当于切换坐标系显示而已，因此只需要减去两个坐标系原点的x，y差值即可）。看看代码　　六、移动图片　　移动图片实现非常简单，首先给gesture-mask绑定touchstart，touchmove，touchend事件，下面分别介绍这三个事件的内容　　首先定义四个变量scx, scy（手指的起始坐标），iX，iY（图片目前的坐标，相对于cCanvas）。　　1、touchstart　　　　方法很简单，就是获取touches[0]的pageX，pageY来更新scx与scy以及更新iX与iY　　2、touchmove　　　　获取touches[0]的pageX，声明变量f1x存放，移动后的x坐标等于iX + f1x – scx，y坐标同理，最后调用_drawImage来更新图片。　　看看代码吧　　七、缩放图片（这里不作特别说明的坐标都是相对于cCanvas坐标系）　　绘制缩放后的图片无非需要4个参数，缩放后图片左上角的坐标以及宽高。求宽高相对好办，宽高等于imgStartWidth * 缩放比率与imgstartHeight * 缩放倍率（imgStartWidth ，imgstartHeight 上文第四节有提到）。接下来就是求缩放倍率的问题了，首先在touchstart事件上求取两手指间的距离d1；然后在touchmove事件上继续求取两手指间的距离d2，当前缩放倍率= 初始缩放倍率 + (d2-d1) / 步长（例如每60px算0.1），touchend事件上让初始缩放倍率=当前缩放倍率。　　至于如何求取缩放后图片左上角的坐标值，在草稿纸上画来画去，画了很久……终于有点眉目。首先要找到一个缩放中心（这里做法是取双指的中点坐标，但是这个坐标必须要位于图片上，如果不在图片上，则取图片上离该中点坐标最近的点），然后存在下面这个等式　　（缩放中心x坐标 – 缩放后图片左上角x坐标）/ 缩放后图片的宽度 = （缩放中心x坐标 – 缩放前图片左上角x坐 香港云主机标）/ 缩放前图片的宽度；（y坐标同理）　　接下来看看下面这个例子（在visio找了很久都没有画坐标系的功能，所以只能手工画了）　　　　绿色框是一张10*5的图片，蓝色框是宽高放大两倍后的图片20*10，根据上面的公式推算的x2 = sx – w2(sx – x1) / w1，y2 = sy – h3(sy – y1) / h2。　　坚持…继续看看代码吧　　说明一下fingers是干嘛的，是用来记录当前有多少只手指在屏幕上触摸。可能会出现这种情况，双指缩放后，其中一只手指移出显示屏，而另外一个手指在显示屏上移动。针对这种情况，要在touchend事件上根据e.changedTouches来移除fingers里已经离开显示屏的finger，如果此时fingers里只剩下一个finger，则更新scx，scy，iX，iY为移动图片做初始化准备。　　八、裁剪图片　　这里很简单，就调用pCanvas的toDataURL方法就可以了以上就是“基于Vue怎么实现移动端图片裁剪组件功能”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注开发云行业资讯频道。

相关推荐: Vue中如何实现组件化开发

本篇内容介绍了“Vue中如何实现组件化开发”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！1，分别改写成1级选项和2级选项的2个组件（好像比较low）2，引用4级…