小程序|微信小程序剪切图片的功能小程序|微信小程序

全平台（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" }

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('接口有误，请检查') } }) }) },

})