【转】小程序图片裁剪组件

最近开始做微信小程序项目，其中有需要图片裁剪的功能。

微信小程序拥有许多方便的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