image-cropper指南攻略
GitHub:https://github.com/wx-plugin/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链接列表 }) }, })