image-cropper: 一款高性能的小程序图片裁剪插件

一款高性能的小程序图片裁剪插件，支持旋转。功能强大；性能超高超流畅，大图毫无卡顿感；组件化，使用简单；

Demo 体验

使用

// json
{
  "usingComponents": {
    "image-cropper": "../image-cropper/image-cropper"
  },
}

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

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

功能

1. 功能强大。
2. 性能超高超流畅，大图毫无卡顿感。
3. 组件化，使用简单。
4. 点击中间窗口实时查看裁剪结果。

参考

image-cropper

本文转载自 1977474741 的 GitHub 仓库 https://github.com/1977474741/image-cropper