0.0.9 • Published 6 years ago

@minidesign/image-cropper v0.0.9

Weekly downloads
-
License
MIT
Repository
-
Last release
6 years ago

@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]
  });
});

参数说明

属性类型缺省值取值描述必填
imgSrcString无限制图片地址
disable_rotateBooleanfalsetrue/false是否禁止用户旋转
widthNumber200超过屏幕宽度自动转为屏幕宽度裁剪框宽度
heightNumber200超过屏幕高度自动转为屏幕高度裁剪框高度
qualityNumber10-1生成的图片质量
cut_topNumber居中始终在屏幕内裁剪框上边距
cut_leftNumber居中始终在屏幕内裁剪框左边距
canvas_topNumber-3000无限制(默认不显示-超出屏幕外)canvas 上边距
canvas_leftNumber0无限制(默认不显示-超出屏幕外)canvas 左边距
imgWidthNumber图片的原宽度支持%(不加单位为 px)(只设置宽度,高度自适应)图片宽度
imgHeightNumber图片的原高度支持%(不加单位为 px)(只设置高度,宽度自适应)图片高度
scaleNumber1无限制图片的缩放比
min_scaleNumber0.5无限制图片的最小缩放比
max_scaleNumber2无限制图片的最大缩放比
rotateNumber0无限制图片的旋转角度

函数说明

函数名参数返回值描述参数必填
upload调起 wx 上传图片接口并开始剪裁
pushImgsrc开始裁剪图片
getImgFunction(回调函数)src获取裁剪之后的图片路径
setWidthwidth设置裁剪框宽度
setHeightheight设置裁剪框高度
cutCenter设置裁剪框居中
setScalescale设置图片缩放比例(不受 min_scale、max_scale 影响)
setRotatedeg设置图片旋转角度
setTransform{x,y,rotate,scale,cutX,cutY}图片在原有基础上的变化(scale 受 min_scale、max_scale 影响)根据需要传参

事件说明

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

6 years ago

0.0.8

6 years ago

0.0.7

6 years ago

0.0.6

6 years ago

0.0.5

6 years ago

0.0.4

7 years ago

0.0.3

7 years ago

0.0.2

7 years ago

0.0.1

7 years ago

0.0.1-alpha.21

7 years ago

0.0.1-alpha.20

7 years ago

0.0.1-alpha.19

7 years ago

0.0.1-alpha.18

7 years ago