通用微信小程序图片裁剪组件，支持宽高比例约

通用微信小程序图片裁剪组件，简单易用，帮助快速开发图片裁剪功能，支持自定义约束宽高，适用于头像或其他需要特定长宽比图片的场景。

下载源码，pages/cropper/目录拷贝到项目中。

{ "usingComponents": { "cropper":"/pages/cropper/cropper" }, "disableScroll": true } 2、wxml页面文件中

<view class='body'> <cropper id='cropper' class='stage'></cropper> <view class='bar'> <view class='btn btn-cancel ripple' bindtap='fnCancel'>取消</view> <view class='btn btn-submit ripple' bindtap='fnSubmit'>确定</view> </view> </view> 3、在onLoad中初始化组件

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自动计算得到。 }); 4、在点击事件中裁剪图片，获取裁剪后的图片路径

cropper.fnCrop({ //裁剪成功的回调 success:function(res){ console.log(res) //生成文件的临时路径 console.log(res.tempFilePath); wx.previewImage({ urls: [res.tempFilePath], }) }, //裁剪失败的回调 fail:function(res){ console.log(res); }, //裁剪结束的回调 complete:function(){ //complete } });