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": true2.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
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。