效果图（将下面的代码复制粘贴就可以做出来了）
第一步
将资源文件解压放到utils目录下
第二步
页面json配置文件引入组件
{
"usingComponents": {
"image-cropper": "/utils/image-cropper/image-cropper"
},
"navigationStyle":"custom"
}第三步
页面使用
入参：
src:'' //原始文件路径（需要修改的文件）
width:250,//宽度
height: 250,//高度
<view>
<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>
<cover-view class='panel-foot' bindtap="submit" style="position: absolute;">
<button class='panelBtn' catchtap='' style="z-index: 9999;">保存</button>
</cover-view>
</view>第四步
js文件写裁剪方法以及最后的保存
Page({
/**
* 页面的初始数据
*/
data: {
src:'',
width:250,//宽度
height: 250,//高度
},
/**
* 生命周期函数--监听页面加载
*/
onl oad: function (options) {
console.log(options.path)
//获取到image-cropper实例
this.cropper = this.selectComponent("#image-cropper");
//开始裁剪
this.setData({
src:app.globalData.resheadUrl+options.path,
});
wx.showLoading({
title: '加载中'
})
},
cropperload(e){
console.log("cropper初始化完成");
},
loadimage(e){
console.log("图片加载完成",e.detail);
wx.hideLoading();
//重置图片角度、缩放、位置
this.cropper.imgReset();
},
clickcut(e) {
//点击裁剪框阅览图片
wx.previewImage({
current: e.detail.url, // 当前显示图片的http链接
urls: [e.detail.url] // 需要预览的图片http链接列表
})
},
submit(e){
this.cropper.getImg((obj) => {
// 这里就是想要截取的图片传给后台的虚拟路径
console.log(obj)
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})