更新记录

1.2.0（2021-03-30） 下载此版本

无

平台兼容性

小程序自定义组件的通用使用方式详见：uni-app中使用小程序自定义组件教程

image-cropper

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

1.功能强大。

2.性能超高超流畅，大图毫无卡顿感。

3.组件化，使用简单。

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

体验Demo

初始准备

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链接列表
            })
        },
    })

参数说明（高亮属性表示对于上个版本有修改，请注意）

函数说明

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

点击导入代码片段

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

进群 | 鼓励作者