we-plugin / we-cropper

微信小程序图片裁剪工具
https://we-plugin.github.io/we-cropper/#/
MIT License
2.18k stars 451 forks source link

invoke event touchStart三个事件均报错,开发工具使用正常,手机实测报错 #61

Closed 450347873 closed 6 years ago

450347873 commented 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() } }`

450347873 commented 6 years ago

已解决,同一页面下,即使父层级设置了z-index为-1,canvas仍然会在顶层