@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(当前裁剪后的图片地址)	用户点击中间裁剪框	是