image-cropper

image-cropper 介绍

image-cropper一款高性能的小程序图片裁剪插件，支持旋转、设置尺寸。

image-cropper特点

1.功能强大，请看下面demo。 

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

3.可以设置导出图片尺寸。

4.组件化，使用非常简单。 

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

初始准备

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

})

},

})

GitHub:https://github.com/wx-plugin/image-cropper

网站描述:一款功能强大的微信小程序图片裁剪插件

image-cropper

官方网站：

小编说

以上是编程之家为你收集整理的image-cropper全部内容。

如果觉得编程之家网站内容还不错，欢迎将编程之家推荐给好友。