1.情境
项目是有微信小程序转过来的,使用原生Input做图片上传,在js中new Image()后,无法触发onLoad方法,代码如下
//获取图片
async imgPreview(file, item) {
let self = this;
//判断支不支持FileReader
if (!file || !window.FileReader) return;
if (/^image/.test(file.type)) {
//创建一个reader
let reader = new FileReader();
//将图片转成base64格式
reader.readAsDataURL(file);
//读取成功后的回调
reader.onloadend = function () {
let result = this.result;
let img = new Image();
img.src = result;
img.onload = async function() {
// 压缩
let data = self.compressFun(img);
console.log('data', data);
// 转blob
let blob = self.dataURItoBlob(result);
console.log('blob', blob);
}
console.info(img)
};
}
2.经过调查发现当前网页中引用了Taro的Image对象,导致new Image的时候调用的并不是window的Image
import {
Block,
View,
Text,
Navigator,
Input,
Image,
ScrollView,
Button
} from '@tarojs/components'
3.解决方法
使用 let img = new window.Image();创建Image对象即可