@minidesign/image-cropper

一款人性化的小程序图片裁剪插件，支持旋转

功能亮点

1.支持旋转支持旋转支持旋转。

2.点击中间窗口实时查看裁剪结果。

3.使用非常简单，人性化。

初始准备

安装

npm install @minidesign/image-cropper

构建npm

引用

{
  "usingComponents": {
    "image-cropper": "@minidesign/image-cropper"
  }
}

使用

<image-cropper
  id="cropper"
  min_scale="0.3"
  imgSrc="{{src}}"
  imgWidth="100%"
  bindcropper="oncropper"
></image-cropper>

获取 image-cropper 对象

this.cropper = this.selectComponent('#cropper');
this.setData({
  src: 'xxx'
});
//点击裁剪框回调
this.cropper.clickCallback(url => {
  // url 就是裁剪后的图片路径
  // 图片预览
  wx.previewImage({
    current: url,
    urls: [url]
  });
});

参数说明

| 属性 | 类型 | 缺省值 | 取值 | 描述 | 必填 | | -------------- | :-----: | :----------: | :------------------------------------------: | :--------------: | :--: | | imgSrc | String | 无 | 无限制 | 图片地址 | 否 | | disable_rotate | Boolean | false | true/false | 是否禁止用户旋转 | 否 | | width | Number | 200 | 超过屏幕宽度自动转为屏幕宽度 | 裁剪框宽度 | 否 | | height | Number | 200 | 超过屏幕高度自动转为屏幕高度 | 裁剪框高度 | 否 | | quality | Number | 1 | 0-1 | 生成的图片质量 | 否 | | cut_top | Number | 居中 | 始终在屏幕内 | 裁剪框上边距 | 否 | | cut_left | Number | 居中 | 始终在屏幕内 | 裁剪框左边距 | 否 | | canvas_top | Number | -3000 | 无限制(默认不显示-超出屏幕外) | canvas 上边距 | 否 | | canvas_left | Number | 0 | 无限制(默认不显示-超出屏幕外) | canvas 左边距 | 否 | | imgWidth | Number | 图片的原宽度 | 支持%(不加单位为 px)(只设置宽度，高度自适应) | 图片宽度 | 否 | | imgHeight | Number | 图片的原高度 | 支持%(不加单位为 px)(只设置高度，宽度自适应) | 图片高度 | 否 | | scale | Number | 1 | 无限制 | 图片的缩放比 | 否 | | min_scale | Number | 0.5 | 无限制 | 图片的最小缩放比 | 否 | | max_scale | Number | 2 | 无限制 | 图片的最大缩放比 | 否 | | rotate | Number | 0 | 无限制 | 图片的旋转角度 | 否 |

函数说明

| 函数名 | 参数 | 返回值 | 描述 | 参数必填 | | ------------ | :--------------------------: | :----: | :--------------------------------------------------------: | :----------: | | upload | 无 | 无 | 调起 wx 上传图片接口并开始剪裁 | 否 | | pushImg | src | 无 | 开始裁剪图片 | 是 | | getImg | Function(回调函数) | src | 获取裁剪之后的图片路径 | 是 | | setWidth | width | 无 | 设置裁剪框宽度 | 是 | | setHeight | height | 无 | 设置裁剪框高度 | 是 | | cutCenter | 无 | 无 | 设置裁剪框居中 | 否 | | setScale | scale | 无 | 设置图片缩放比例（不受 min_scale、max_scale 影响） | 是 | | setRotate | deg | 无 | 设置图片旋转角度 | 是 | | setTransform | {x,y,rotate,scale,cutX,cutY} | 无 | 图片在原有基础上的变化(scale 受 min_scale、max_scale 影响) | 根据需要传参 |

事件说明

| 事件名 | 参数 | 返回值 | 描述 | 参数必填 | | ------------- | :----------------: | :-----------------------: | :----------------: | :------: | | clickCallback | Function(回调函数) | src(当前裁剪后的图片地址) | 用户点击中间裁剪框 | 是 |