几个基于微信公众号的项目,最近收到几个异常情况的反馈,一个是说照片不能上传,另一个说打开页面先是白屏。
问了下手机型号,都说是iphone(其中一个iphone6s),同事的iphone手机操作没有问题。一般这种时候我就只能打开ie试下,大多数情况下能发现问题。
IE和低版本Safari不支持canvas.toBlob
这个就是在ie下发现的不支持toBlob, 进而知道低版本safari也不支持,需要兼容以下
if (!HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
value: function (callback, type, quality) {
let dataURL = this.toDataURL(type, quality).split(',')[1];
setTimeout(function() {
let binStr = atob( dataURL ),
len = binStr.length,
arr = new Uint8Array(len);
for (let i = 0; i < len; i++ ) {
arr[i] = binStr.charCodeAt(i);
}
callback( new Blob( [arr], {type: type || 'image/png'} ) );
});
}
});
}
ES6转ES5
这个是白屏的那个问题,这个应该是忘记转了o(╥﹏╥)o
1. 安装 @babel/preset-env
cnpm install @babel/preset-env --save
- 设置package.json
"babel": {
"presets": [
"env"
]
}
以上更新后,两台iphone就正常了