剪切和旋转小程序图片的示例代码

一个微信小程序的图片剪辑组件可以通过手势控制旋转、缩放和移动，或者点击旋转旋转90度，先看效果(视频画面不知道为什么不能用，最后过度压缩的GIF优先):

毫无疑问，画布是用来进行图像剪辑的，但是开发过小程序的同学应该知道一些画布的坑。比如小程序的画布大小设置时，不能像web的画布一样通过css样式调整手机上显示的画布大小，画布不能设置太大，因为可能会导致小程序在一些安卓机器上崩溃，用画布画太大的图片会让小程序很卡等。

网上能找到的图片裁剪框架大多是直接在画布上绘制图片，然后通过监控用户在画布上的手势来控制图片的移动和旋转，这样裁剪出来的图片会因为画布太小而变得模糊。一种解决方案是在页面上放置另一个隐藏的画布，它可以用作实际裁剪图片的画布。当然，剪辑数据来自第一个画布。但是还是有一些小问题，就是画布画大图会卡住。这种方案需要在监控用户手势变化的同时不断重绘画布，卡顿变得更加严重，体验非常糟糕。

出于以上原因，我使用视图放置图片，监控视图上的手势，通过css样式控制图片的旋转、缩放和移动，最后用隐藏画布进行剪切。先看页面布局：

视图类='容器'！-裁剪框和初始图片，裁剪框监控用户手势，获取移动，缩放和旋转值，图像通过css样式-view class=' img ' style=' width : { { width } } px显示变化；height : { { height } } px ' catch touchstart=' touchstartCallback ' catch touch move=' touchmoveCallback ' catch touch end=' touchendCallback ' image style=' transform : translate({ { ST v . offsetx } } px，{ { stv . offset } } px)scale({ { stv . scale } })rotate({ { stv . rotate } } deg)；width : { { originimig . width } } px；高度： { { originimg . height } } px ' src=' http : { { originimg . URL } } '/image/view view class=' footer ' view bind tap=' upload tap '选择图片/视图视图bindtap='rotate '旋转/视图bindtap='cropperImg '裁剪/视图/视图！- canvas的长度和宽度设置为原始图片设置的两倍，这样裁剪后的图片更清晰，不会太大-canvas class=' img crop ' style=' width : { { width * 2 } } px；' height: { { height * 2 } } px'Canvas-ID=' img裁剪'/Canvas/view最重要的操作就是如何保持图片在视图中的位置变化一致，然后在canvas中裁剪出来。我们都知道图片相对于视图左上角的坐标，图片的长度和宽度，旋转值可以通过用户的手势变化来计算。旋转时，只需将画布的中心移到图片的中心，然后旋转即可。

let CTX=wx . createcanvascontext(' img crop '，this)；让cropData=_ this . data . stv；CTX . save()；//比例偏移值let x=(_ this . data . origin img . width-_ this . data . origin img . width *裁剪数据. scale让y=(_ this . data . originimig . height-_ this . data . originimig . height * cropdata . scale)/2；//画布中各点的坐标被转移到图片的中心。让movex=(crop data . offset xx)* 2 _ this . data . originimig . width * crop data . scale；让movey=(cropdata . offsecty y)* 2 _ this . data . originimig . height * cropdata . scale；ctx.translate(movex，movey)；CTX . rotate(cropdata . rotate * Math。PI/180)；ctx.translate(-movex，-movey)；CTX . draw image(_ this . data . originimig . URL，(cropdata . offset x)* 2，(cropdata . offset y)* 2，_ this . data . originimig . width * 2 * cropdata . scale，_ this . data . originimig . height * 2 * cropdata . scale)；CTX . restore()；要查看完整的代码，请移动到：https://github.com/yuanwyj/Mini-Program-cropper,喜欢画一个开始~ ~

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。