标签:global turn current function toast rap main syn json
上传图片的时候调起裁剪页面,裁剪后再回调完成上传;
图片裁剪直接用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(); } }) }, })
标签:global turn current function toast rap main syn json
原文地址:https://www.cnblogs.com/6min/p/11005343.html