[Bug Report] 小程序真机环境下，对数组原型进行操作会导致裁剪功能失效

[fengzou1994]

we-cropper 版本

1.2.0

对应工具或者iOS或者Andriod的版本号

ios10.3.3

微信版本号

6.7.1

重现步骤

1. 在js中写操作数组原型的方法；
2. 当上传图片成功后；
3. 在页面上对图片进行裁剪操作，当操作图片移动位置时，图片就消失了；
4. 经过排查，发现在公用类工具js中添加了方法在数组原型上，才会导致此问题，只要不操作数据原型，该功能就可以正常使用；
5. （ps:用小程序调试工具，该功能没有不会出现此问题；只有在真机上调试才会出现，经测试，安卓和ios都能复现这个问题）；
6. 以下附上对数组原型操作的代码：

`/**

• 删除数组某个元素
• @param val */ Array.prototype.remove = function (val) { var index = this.indexOf(val); if (index > -1) { this.splice(index, 1); } };`

期待的行为

1. 希望楼主能告知导致此现象的原因；
2. 操作任何数据都对裁剪功能无影响；

实际的行为

当我的小程序的公用js库中存在对数组原型操作，裁剪功能在小程序上不能正常使用；

（ps：调试工具中没问题，在真机上就会出现，现象为：

1. 当图片上传成功后；

2. 移动图片位置，图片就消失了，页面也无任何报错

   ）；

[dlhandsome]

按照你的方式，重现了这个问题，发现问题出在这里：

重现过程

在添加下面代码后：

Array.prototype.remove = function (val) {
  var index = this.indexOf(val);
  if (index > -1) {
    this.splice(index, 1);
  }
};

拖动手指时，打印 touchstart 的事件对象 e ，发现触点 e.touches数组中包含了多个function，如图：

进一步的，为了排除是 we-cropper对这个触点对象操作造成的，直接移除 we-cropper，在 page 中添加上述代码，如下：

/**
 * Created by sail on 2017/6/1.
 */
import WeCropper from '../we-cropper/we-cropper.js'

const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 50

Array.prototype.remove = function (val) {
  var index = this.indexOf(val);
  if (index > -1) {
    this.splice(index, 1);
  }
};

Page({
  data: {
    cropperOpt: {
      id: 'cropper',
      width,
      height,
      scale: 2.5,
      zoom: 8,
      cut: {
        x: (width - 300) / 2,
        y: (height - 300) / 2,
        width: 300,
        height: 300
      }
    }
  },
  touchStart (e) {
    console.log(e)
    // this.wecropper.touchStart(e)
  },
  touchMove (e) {
    // this.wecropper.touchMove(e)
  },
  touchEnd (e) {
    // this.wecropper.touchEnd(e)
  },
  onLoad (option) {
  }
})

发现输出 e.touches 中仍会包含 function

结论

失效并非 we-cropper 本身引起，而是这段代码的引入改变了小程序原生触摸对象，但原因未知，可能是小程序的内部机制引起的（猜测）

解决方案

• 避免在原生 Array prototype 对象上添加方法，若实在要用该方法，可以另写一个

• 对传入 we-cropper 中的触摸对象进行过滤，具体实现方式可以参考 #41