前端使用Image()函数加载base64图片不兼容无onload事件解决方法
|
freeflydom
2023年7月4日 16:57
本文热度 700
|
Image()函数将会创建一个新的HTMLImageElement实例。它的功能等价于 document.createElement('img')。
正常情况下，我们使用下面方法加载图片，是能能够获取到onload事件的：
const img = new Image();
img.src = 'picture.jpg';
img.onload = () => {
console.log('success');
}
但是如果你需要加载的图片是base64图片时，可能是因为没有请求发出，onload事件是无法执行的。
几经尝试，最终考虑将base64图片转位ObjectUrl再加载，好处是无需后端，纯前端即可兼容。移动端兼容性也非常不错。
具体实现如下：
// base64转Blob
const base64ToBlob = (base64Data) => {
const arr = base64Data.split(','),
type = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
len = bstr.length,
u8Arr = new Uint8Array(l);
while (len--) u8Arr[l] = bstr.charCodeAt(len);
return new Blob([u8Arr], { type });
}
const base64 = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
const imgBlob = base64ToBlob(base64)
const img = new Image();
img.src = window.URL.createObjectURL(imgBlob); // blob:http://xxx
img.onload = function () {
console.log('success')
}
URL.createObjectURL 可能有一些兼容性问题，如果你在使用过程遇到，可以hack兼容一下
function getObjectURL(blob) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(blob);
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(blob);
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(blob);
}
return url;
}
该文章在 2023/7/4 16:58:00 编辑过
400 186 1886
