import WeCropper from '../../Components/we-cropper/we-cropper.js' const configs = require('../../config/config.js') const app = getApp() const config = app.globalData.config const device = wx.getSystemInfoSync() const width = device.windowWidth const height = device.windowHeight - 50 Page({ data: { cropperOpt: { id: 'cropper', targetId: 'targetCropper', pixelRatio: device.pixelRatio, width, height, scale: 2.5, zoom: 8, cut: { x: (width - 300) / 2, y: (height - 300) / 2, width: 300, height: 170 }, boundStyle: { color: config.getThemeColor(), mask: 'rgba(0,0,0,0.8)', lineWidth: 1 } } }, touchStart(e) { this.cropper.touchStart(e) }, touchMove(e) { this.cropper.touchMove(e) }, touchEnd(e) { this.cropper.touchEnd(e) }, getCropperImage() { this.wecropper.getCropperImage((tempFilePath) => { // tempFilePath 为裁剪后的图片临时路径 if (tempFilePath) { console.log(this.data.save, 'this.data.save'); let onlineFilePath = "" if (this.data.save == 1) { wx.showLoading({ title: '正在上传,请稍后' }) var pages = getCurrentPages(); var prevPage = pages[pages.length - 2]; //上一个页面 console.log(tempFilePath, 'tempFilePath'); wx.uploadFile({ url: configs.api.imgUpload, filePath: tempFilePath, name: 'file', header: { 'token': app.globalData.token }, success(res) { wx.hideLoading(); onlineFilePath = JSON.parse(res.data).data console.log(onlineFilePath.url, 'onlineFilePath'); let tempFilePaths = prevPage.data.tempFilePaths tempFilePaths.push(onlineFilePath.url) prevPage.setData({ tempFilePaths }); wx.navigateBack({ delta: 1 }) }, fail(res) { wx.hideLoading(); wx.showToast({ title: '网络错误,请稍后再试', icon: "none", duration: 2000 }) } }) } else if (this.data.save == 2) { var pages = getCurrentPages(); var prevPage = pages[pages.length - 2]; //上一个页面 console.log(tempFilePath, 'tempFilePath'); wx.uploadFile({ url: configs.api.imgUpload, filePath: tempFilePath, name: 'file', header: { 'token': app.globalData.token }, success(res) { wx.hideLoading(); onlineFilePath = JSON.parse(res.data).data console.log(onlineFilePath.url, 'onlineFilePath'); let BtempFilePaths = prevPage.data.BtempFilePaths BtempFilePaths.push(onlineFilePath.url) prevPage.setData({ BtempFilePaths }); wx.navigateBack({ delta: 1 }) }, fail(res) { wx.hideLoading(); wx.showToast({ title: '网络错误,请稍后再试', icon: "none", duration: 2000 }) } }) } else { console.log(tempFilePath, 'tempFilePath'); wx.uploadFile({ url: configs.api.imgUpload, filePath: tempFilePath, name: 'file', header: { 'token': app.globalData.token }, success(res) { wx.hideLoading(); onlineFilePath = JSON.parse(res.data).data console.log(onlineFilePath.url, 'onlineFilePath'); wx.redirectTo({ url: `/pages/addReel/addReel?res=${onlineFilePath.url}` }) }, fail(res) { wx.hideLoading(); wx.showToast({ title: '网络错误,请稍后再试', icon: "none", duration: 2000 }) } }) } } else { console.log('获取图片地址失败,请稍后重试') } }) }, uploadTap() { const self = this wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success(res) { const src = res.tempFilePaths[0] // 获取裁剪图片资源后,给data添加src属性及其值 self.cropper.pushOrign(src) }, }) }, onLoad(option) { let _this = this; // console.log(app.globalData.mouldType,"mouldType") if (app.globalData.mouldType == 1) { _this.setData({ cropperOpt: { id: 'cropper', targetId: 'targetCropper', pixelRatio: device.pixelRatio, width, height, scale: 2.5, zoom: 8, cut: { x: (width - 300) / 2, y: (height - 300) / 2, width: 300, height: 300 }, boundStyle: { color: config.getThemeColor(), mask: 'rgba(0,0,0,0.8)', lineWidth: 1 } } }) } else { _this.setData({ cropperOpt: { id: 'cropper', targetId: 'targetCropper', pixelRatio: device.pixelRatio, width, height, scale: 2.5, zoom: 8, cut: { x: (width - 300) / 2, y: (height - 300) / 2, width: 300, height: 170 }, boundStyle: { color: config.getThemeColor(), mask: 'rgba(0,0,0,0.8)', lineWidth: 1 } } }) } if (option.save) { _this.setData({ save: option.save }) } wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success(res) { // tempFilePath可以作为img标签的src属性显示图片 const src = res.tempFilePaths[0] const { cropperOpt } = _this.data cropperOpt.boundStyle.color = config.getThemeColor() _this.setData({ cropperOpt }) if (src) { cropperOpt.src = src _this.cropper = new WeCropper(cropperOpt) .on('ready', (ctx) => { console.log(`wecropper is ready for work!`) }) .on('beforeImageLoad', (ctx) => { console.log(`before picture loaded, i can do something`) console.log(`current canvas context:`, ctx) wx.showToast({ title: '上传中', icon: 'loading', duration: 20000 }) }) .on('imageLoad', (ctx) => { console.log(`picture loaded`) console.log(`current canvas context:`, ctx) wx.hideToast() }) .on('beforeDraw', (ctx, instance) => { console.log(`before canvas draw,i can do something`) console.log(`current canvas context:`, ctx) }) } }, fail(res) { wx.navigateBack({ delta: 1 }) } }) } })