上传图片的时候调起裁剪页面,裁剪后再回调完成上传;
图片裁剪直接用we-cropper https://github.com/we-plugin/we-cropper
we-cropper使用详细方法参考 https://we-plugin.github.io/we-cropper/#/
chooseImage: function(e){ var _this = this; wx.chooseImage({ count: 1, sizeType: [\'original\', \'compressed\'], sourceType: [\'album\', \'camera\'], success: function (res) { var tempFilePaths = res.tempFilePaths[0]; wx.navigateTo({ url: \'/pages/new/imgcorp?img=\'+tempFilePaths, }); } }) }, uploadImage(path){ var _this = this; wx.showLoading({ title: \'正在上传..\', }); wx.uploadFile({ url: app.globalData.domain + \'user/uploadimage\', filePath: path, name: \'file\', formData: { \'uid\': app.globalData.userId }, success: function (res) { var data = JSON.parse(res.data); if (data.status == 0) { wx.showToast({ title: data.err, duration: 2000 }); return false; } wx.hideLoading(); _this.setData({ imageurls: \'Uploads/\' + data.urls, postimage: path }); } }) },
imgcorp.wxml
<!--pages/new/imgcorp.wxml--> <template name="we-cropper"> <canvas class="cropper {{cutImage}}" disable-scroll="true" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" style="width:{{width}}px;height:{{height}}px;" canvas-id="{{id}}"> </canvas> </template> <view class="cropper-wrapper {{cutImage}}"> <template is="we-cropper" data="{{...cropperOpt}}"/> </view> <view class="operbtns"> <button class="button" type="primary" bindtap="getCropperImage">完成</button> </view>
imgcorp.js
//pages /new /imgcorp.js import WeCropper from \'../../utils/we-cropper.js\' const device = wx.getSystemInfoSync() const width = device.windowWidth const height = device.windowHeight - 100; Page({ data: { cropperOpt: { id: \'cropper\', width, height, scale: 2.5, zoom: 8, cut: { x: (width - 150) / 2, y: (height - 150) / 2, width: 150, height: 150 } } }, onLoad: function (options) { this.data.cropperOpt.src = options.img; const { cropperOpt } = this.data new WeCropper(cropperOpt) .on(\'beforeImageLoad\', (ctx) => { wx.showToast({ title: \'上传中\', icon: \'loading\', duration: 20000 }) }) .on(\'imageLoad\', (ctx) => { wx.hideToast() }) .updateCanvas(); }, touchStart(e) { this.wecropper.touchStart(e) }, touchMove(e) { this.wecropper.touchMove(e) }, touchEnd(e) { this.wecropper.touchEnd(e) }, getCropperImage() { var that = this; that.wecropper.getCropperImage((src) => { if (src) { var pages = getCurrentPages(); var currPage = pages[pages.length - 1]; //当前页面 var prevPage = pages[pages.length - 2]; //上一个页面 prevPage.uploadImage(src); wx.navigateBack(); } }) }, })
请发表评论