全平台（Vue、React、微信小程序）任意角度旋转 图片裁剪组件 | 微信开放社区

 Simple-Crop/USAGE-wechat.md at master · newbieYoung/Simple-Crop · GitHub

首选下载下来wechat这个文件夹。放在小程序的components里面

 把它放做一个组件来用啦.我把这个文件夹重命名为simple-crop啦。

json里面引入

{"navigationBarTitleText": "基本信息","usingComponents": {"simple-crop": "../components/simple-crop/index"},"navigationStyle": "custom"
}

<button class="avatar-wrapper" bindtap='changeHead' ><image class="avatar" src="{{avatar1}}"></image>
</button><simple-crop wx:if="{{crop.visible}}" size="{{crop.size}}" src="{{crop.src}}" cropSizePercent="{{crop.cropSizePercent}}" borderColor="{{crop.borderColor}}" bindcropUpload="uploadCallback" bindcropClose="closeCallback" bindcropCrop="cropCallback"></simple-crop>

js里面

Page({data: {avatar1:'',crop:{src: null, // 裁剪图片地址visible: false, // 是否显示size: { //裁剪尺寸width: 400,height: 400},cropSizePercent: 0.9, //裁剪框显示比例borderColor: '#fff', //裁剪框边框颜色result: '', //裁剪结果地址}},

//选中图片以后
uploadCallback(e){//console.log("图片信息0",e)
},
//关闭裁剪图片弹窗
closeCallback(e){this.setData({['crop.visible']: false,})console.log("图片信息1",e)
},
//裁剪图片弹窗点击确定
cropCallback(e){// 返回选定照片的本地文件路径,访问上传接口this.UploadImg(e.detail.resultSrc);
},
//点击用户头像
changeHead(){var _this = this;wx.showActionSheet({itemList: ["拍照", "从相册中选择"],itemColor: "#000000",success: function (res) {if (!res.cancel) {if (res.tapIndex == 0) {_this.imgWShow("camera")        //拍照} else if (res.tapIndex == 1) {_this.imgWShow("album")      //相册}}}})
},
// 点击调用手机相册/拍照
imgWShow: function (type) {var _this = this;let len = 0;if (_this.data.imgList != null) {len = _this.data.imgList.length}   //获取当前已有的图片wx.chooseImage({count:1,     //最多还能上传的图片数,这里最多可以上传1张sizeType: ['original', 'compressed'],        //可以指定是原图还是压缩图,默认二者都有sourceType: [type],             //可以指定来源是相册还是相机, 默认二者都有success: function (res) {wx.showToast({title: '正在上传...',icon: "loading",mask: true,duration: 1000})_this.setData({['crop.visible']: true,['crop.src']: res.tempFilePaths[0],})},fail: function () {wx.showToast({title: '图片上传失败',icon: 'none'})return;}})
},

//上传头像给接口，本地图片avatarUrl转成网络图片
UploadImg(avatarUrl){uploadFile(avatarUrl).then(res => {this.setData({['crop.visible']: false,avatar1:res,})})
},

// 上传图片的接口封装

uploadFile: (filePath) => {let url = "XXXXX/uploaded_file"return new Promise((resolve, reject) => {wx.uploadFile({url: url,filePath: filePath,name: "file",header: {'content-type': 'application/json','token': getToken(),},success: (res) => {console.log(res)let result = JSON.parse(res.data)let {code} = result// resolve(res.data.data)if (code === 401 || code === 402 || code === 403) {wx.redirectTo({url: "/pages/site/login/login"})return} else if (code === 200) {return resolve(result.data)} else {return reject(result.message)}},fail() {reject('接口有误，请检查')}})})
},

})