image-cropper 介绍
image-cropper一款高 性能 的 小程序 图片 裁剪 插件 ， 支持 旋转、设置尺寸。
image-cropper特点
1. 功能 强大，请看下面demo。?
2. 性能 超高超流畅，大图毫无卡顿感。?
3.可以设置导出 图片 尺寸。
4.组件化，使用非常简单。?
5.点击中间窗口实时查看裁剪结果。 ?
初始准备
1.json 文件 中 添加 image-cropper "usingComponents": {"image-cropper": "image-cropper/image-cropper"},"navigationBarTitleText": "裁剪 图片 "," dis ableScroll": true 2.wxml 文件<image-cropper id="image-cropper" limit_move="{{true}}" dis able_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官方网站
官方网站：
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。