【转】小程序图片裁剪组件
最近开始做微信小程序项目，其中有需要图片裁剪的功能。
微信小程序拥有许多方便的API，相机相册调用作为移动端使用频率最高的API之一，小程序做了非常好的封装，使用上也非常舒服。然而，翻遍了整篇小程序开发文档，仍然没能找到裁剪相关的描述。难道小程序官方没考虑过为小程序提供一个裁剪API吗。
裁剪API是没找到，优秀的开源的第三方裁剪组件还是能找到一些的，试用了几个，跟自己预期的裁剪方法不太一样，之前做过一段时间的原生开发，Android系统自带就有一个不错的裁剪方法，我想能不能做一个防Android系统裁剪的小程序组件呢？
好在小程序提供了一个canvas画布组件，提供了非常丰富的API，可以在画布中绘制图片，并将画布中的图形输出，这个组件正合适用来做裁剪功能，事实上，其他一些第三方裁剪组件，也正是基于这个画布组件来制作的。
自己动手丰衣足食，开始自己造轮子。
那么，来吧，放预览图。
使用说明
核心逻辑写在组件中，在需要剪裁的页面引入组件即可。同时禁用页面弹动（ios端页面默认有页面弹动属性，需要禁用）。
{ "usingComponents": { "cropper":"/pages/cropper/cropper" }, "disableScroll": true }
页面布局部分
<!--pages/cropper/cropper-sample.wxml--> <view class=\'body\'> <!-- 裁剪组件 --> <cropper id=\'cropper\' class=\'stage\'></cropper> <!-- 取消 和 确认 按钮，并绑定事件 --> <view class=\'bar\'> <view class=\'btn btn-cancel\' bindtap=\'fnCancel\'>取消</view> <view class=\'btn btn-submit\' bindtap=\'fnSubmit\'>确定</view> </view> </view>
页面样式
page{ height: 100%; box-sizing: border-box; } .body{ height: 100%; display: flex; flex-direction: column; } .stage{ flex-grow: 1; } .bar{ height: 80rpx; padding: 36rpx; display: flex; flex-direction: row; background-color: black; } .btn{ position: relative; flex-grow: 1; border: 2rpx solid grey; line-height: 80rpx; text-align: center; color: white; font-size: 32rpx; } .btn-cancel{ border-top-left-radius: 40rpx; border-bottom-left-radius: 40rpx; } .btn-submit{ border-top-right-radius: 40rpx; border-bottom-right-radius: 40rpx; }
漂亮的布局有了，接着就可以再js里愉快的裁剪图片了。
再页面加载回调中，对组件进行初始化。
imagePath必填，其他参数都有默认值，都是可选的。
裁剪的宽高比是可以约束的，只需要设置aspectRatio属性，就可以约束裁剪的宽高比。在裁剪用户头像时，需要裁剪正方形图片时，aspectRatio属性便会变的非常有用，此时，设置aspectRatio为1，就可以裁剪出正方形的图片。
onLoad: function (options) { cropper = this.selectComponent(\'#cropper\'); cropper.fnInit({ imagePath:\'/assets/test.jpg\', //*必填 debug: true, //可选。是否启用调试，默认值为false。true：打印过程日志；false：关闭过程日志 outputFileType: \'jpg\', //可选。目标文件的类型。默认值为jpg，jpg：输出jpg格式图片；png：输出png格式图片 quality: 1, //可选。图片的质量。默认值为1，即最高质量。目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。 aspectRatio: 1.25, //可选。裁剪的宽高比，默认null，即不限制剪裁宽高比。aspectRatio需大于0 minBoxWidthRatio: 0.2, //可选。最小剪裁尺寸与原图尺寸的比率，默认0.15，即宽度最小剪裁到原图的0.15宽。 minBoxHeightRatio: 0.2, //可选。同minBoxWidthRatio，当设置aspectRatio时，minBoxHeight值设置无效。minBoxHeight值由minBoxWidth 和 aspectRatio自动计算得到。 initialBoxWidthRatio: 0.6, //可选。剪裁框初始大小比率。默认值0.6，即剪裁框默认宽度为图片宽度的0.6倍。 initialBoxHeightRatio: 0.6 //可选。同initialBoxWidthRatio，当设置aspectRatio时，initialBoxHeightRatio值设置无效。initialBoxHeightRatio值由initialBoxWidthRatio 和 aspectRatio自动计算得到。 }); }
canvas画布裁剪逻辑已经封装好，只需要调用组件的fnCrop方法便可以完成裁剪。
fnSubmit:function(){ //do crop cropper.fnCrop({ //剪裁成功的回调 success:function(res){ //生成文件的临时路径 console.log(res.tempFilePath); wx.previewImage({ urls: [res.tempFilePath], }) } }); }
组件源码 和 裁剪demo 放在github：
https://github.com/light-wind/wx-cropper
from:https://blog.csdn.net/u011054919/article/details/91136038
请发表评论