Closed 450347873 closed 6 years ago
具体报错:(invoke event) thirdScriptError Cannot read property 'touchEnd' of undefined;at pages........
注意:在模拟器上完全不会报这个错
我做的修改:将index页面和upload页面合在了一个页面下
具体修改--->>> WXSS: `@import "../../../../utils/we-cropper/common.wxss";
.cropper-wrapper{ position: fixed; top: 0; left: 0; } .cropper{ position: absolute; top: 0; left: 0; } .upload{ position: fixed; bottom: 0; left: 0; width: 50vw; height:100rpx; background: #000; } .getCropperImage{ position: fixed; bottom: 0; right: 0; width: 50vw; height:100rpx; background: #000; }
.cropper-buttons{ background-color: rgba(0, 0, 0, 0.95); color: #04b00f; }`
JS ` import WeCropper from '../../../../utils/we-cropper/we-cropper.js'
const device = wx.getSystemInfoSync() const width = device.windowWidth const height = device.windowHeight - 50 Page({ data: { zOne:-1, opacityOne:0, cropperOpt: { id: 'cropper', width, height, scale: 2.5, zoom: 8, cut: { x: (width - 300) / 2, y: (height - 300) / 2, width: 200, height: 200 } } }, touchStart(e) { console.log('imbegin') this.wecropper.touchStart(e) }, touchMove(e) { console.log('imbegin2') this.wecropper.touchMove(e) }, touchEnd(e) { console.log('imbegin3') this.wecropper.touchEnd(e) },
getCropperImage() { console.log('imbegin4') this.wecropper.getCropperImage((avatar) => { if (avatar) { // 获取到裁剪后的图片 this.setData({ opacityOne:0, zOne:-1, src: avatar }) } 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.wecropper.pushOrign(src) } })
}, upload() { var self = this wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success(res) { const src = res.tempFilePaths[0] self.setData({ zOne:1000, opacityOne:1, src:src }) } }) }, onLoad(option) { catchs(this) let { avatar } = option if (avatar) { this.setData({ src: avatar }) } } })
function catchs(page) { const { cropperOpt } = page.data
if (page.data.src) { cropperOpt.src = page.data.src 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) }) .updateCanvas() } }`
wecropper is ready for work!
before picture loaded, i can do something
current canvas context:
picture loaded
before canvas draw,i can do something
已解决,同一页面下,即使父层级设置了z-index为-1,canvas仍然会在顶层
具体报错:(invoke event) thirdScriptError Cannot read property 'touchEnd' of undefined;at pages........
注意:在模拟器上完全不会报这个错
我做的修改:将index页面和upload页面合在了一个页面下
具体修改--->>> WXSS: `@import "../../../../utils/we-cropper/common.wxss";
.cropper-wrapper{ position: fixed; top: 0; left: 0; } .cropper{ position: absolute; top: 0; left: 0; } .upload{ position: fixed; bottom: 0; left: 0; width: 50vw; height:100rpx; background: #000; } .getCropperImage{ position: fixed; bottom: 0; right: 0; width: 50vw; height:100rpx; background: #000; }
.cropper-buttons{ background-color: rgba(0, 0, 0, 0.95); color: #04b00f; }`
JS ` import WeCropper from '../../../../utils/we-cropper/we-cropper.js'
const device = wx.getSystemInfoSync() const width = device.windowWidth const height = device.windowHeight - 50 Page({ data: { zOne:-1, opacityOne:0, cropperOpt: { id: 'cropper', width, height, scale: 2.5, zoom: 8, cut: { x: (width - 300) / 2, y: (height - 300) / 2, width: 200, height: 200 } } }, touchStart(e) { console.log('imbegin') this.wecropper.touchStart(e) }, touchMove(e) { console.log('imbegin2') this.wecropper.touchMove(e) }, touchEnd(e) { console.log('imbegin3') this.wecropper.touchEnd(e) },
getCropperImage() { console.log('imbegin4') this.wecropper.getCropperImage((avatar) => { if (avatar) { // 获取到裁剪后的图片 this.setData({ opacityOne:0, zOne:-1, src: avatar }) } else { console.log('获取图片失败,请稍后重试') } }) }, uploadTap() { const self = this
}, upload() { var self = this wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success(res) { const src = res.tempFilePaths[0] self.setData({ zOne:1000, opacityOne:1, src:src }) } }) }, onLoad(option) { catchs(this) let { avatar } = option if (avatar) { this.setData({ src: avatar }) } } })
function catchs(page) { const { cropperOpt } = page.data
if (page.data.src) { cropperOpt.src = page.data.src 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) }) .updateCanvas() } }`