Home

Awesome

image-cropper

一款高性能的小程序图片裁剪插件,支持旋转。

1.功能强大。
2.性能超高超流畅,大图毫无卡顿感。
3.组件化,使用简单。
4.点击中间窗口实时查看裁剪结果。
<h2 align = "center" style="">体验Demo</h2> <div align=center ><img width="200" height="200" src="https://pubser-res.zhenai.com/other/temp/202006/19/12085876945182.jpg"/></div>

初始准备

1.json文件中添加image-cropper

    "usingComponents": {
       "image-cropper": "../image-cropper/image-cropper"
    },
    "navigationBarTitleText": "裁剪图片",
    "disableScroll": true

2.wxml文件

<image-cropper id="image-cropper" limit_move="{{true}}" disable_rotate="{{true}}" width="{{width}}" height="{{height}}" imgSrc="{{src}}" bindload="cropperload" bindimageload="loadimage" bindtapcut="clickcut"></image-cropper>

3.简单示例

    Page({
        data: {
            src:'',
            width:250,//宽度
            height: 250,//高度
        },
        onLoad: function (options) {
	    //获取到image-cropper实例
            this.cropper = this.selectComponent("#image-cropper");
            //开始裁剪
            this.setData({
                src:"https://raw.githubusercontent.com/1977474741/image-cropper/dev/image/code.jpg",
            });
            wx.showLoading({
                title: '加载中'
            })
        },
        cropperload(e){
            console.log("cropper初始化完成");
        },
        loadimage(e){
            console.log("图片加载完成",e.detail);
            wx.hideLoading();
            //重置图片角度、缩放、位置
            this.cropper.imgReset();
        },
        clickcut(e) {
            console.log(e.detail);
            //点击裁剪框阅览图片
            wx.previewImage({
                current: e.detail.url, // 当前显示图片的http链接
                urls: [e.detail.url] // 需要预览的图片http链接列表
            })
        },
    })

参数说明<font color=#C39178 size=2>(高亮属性表示对于上个版本有修改,请注意)</font>

属性类型缺省值取值描述必填
imgSrcString无限制图片地址(如果是网络图片需配置安全域名)
disable_rotateBooleanfalsetrue/false禁止用户旋转(为false时建议同时设置limit_move为false)
limit_moveBooleanfalsetrue/false限制图片移动范围(裁剪框始终在图片内)(为true时建议同时设置disable_rotate为true)
widthNumber200超过屏幕宽度自动转为屏幕宽度裁剪框宽度
heightNumber200超过屏幕高度自动转为屏幕高度裁剪框高度
max_widthNumber300裁剪框最大宽度裁剪框最大宽度
max_heightNumber300裁剪框最大高度裁剪框最大高度
min_widthNumber100裁剪框最小宽度裁剪框最小宽度
min_heightNumber100裁剪框最小高度裁剪框最小高度
disable_widthBooleanfalsetrue/false锁定裁剪框宽度
disable_heightBooleanfalsetrue/false锁定裁剪框高度
disable_ratioBooleanfalsetrue/false锁定裁剪框比例
export_scaleNumber3无限制输出图片的比例(相对于裁剪框尺寸)
qualityNumber10-1生成的图片质量
cut_topNumber居中始终在屏幕内裁剪框上边距
cut_leftNumber居中始终在屏幕内裁剪框左边距
img_widthNumber宽高都不设置,最小边填满裁剪框支持%(不加单位为px)(只设置宽度,高度自适应)图片宽度
img_heightNumber宽高都不设置,最小边填满裁剪框支持%(不加单位为px)(只设置高度,宽度自适应)图片高度
scaleNumber1无限制图片的缩放比
angleNumber0(limit_move=true时angle=n*90)图片的旋转角度
min_scaleNumber0.5无限制图片的最小缩放比
max_scaleNumber2无限制图片的最大缩放比
bindloadFunctionnull函数名称cropper初始化完成
bindimageloadFunctionnull函数名称图片加载完成,返回值Object{width,height,path,type等}
bindtapcutFunctionnull函数名称点击中间裁剪框,返回值Object{src,width,height}

函数说明

函数名参数返回值描述参数必填
upload调起wx上传图片接口并开始剪裁
pushImgsrc放入图片开始裁剪
getImgFunction(回调函数)Object{url,width,height}裁剪并获取图片(图片尺寸 = 图片宽高 * export_scale)
setCutXYX、Y设置裁剪框位置
setCutSizewidth、height设置裁剪框大小
setCutCenter设置裁剪框居中
setScalescale设置图片缩放比例(不受min_scale、max_scale影响)
setAngledeg设置图片旋转角度(带过渡效果)
setTransform{x,y,angle,scale,cutX,cutY}图片在原有基础上的变化(scale受min_scale、max_scale影响)根据需要传参
imgReset重置图片的角度、缩放、位置(可以在onloadImage回调里使用)

Demo地址:https://github.com/wx-plugin/image-cropper-demo

点击导入代码片段

如果有什么好的建议欢迎提issues或者提pr

进群 | 鼓励作者

<img width="300" height="300" src="https://pubser-res.zhenai.com/other/temp/202103/19/19084532315057.png"/> <img width="300" height="300" src="https://pubser-res.zhenai.com/other/temp/202006/27/15321042129368.jpg"/>