Image()函數(shù)將會(huì)創(chuàng)建一個(gè)新的HTMLImageElement實(shí)例。它的功能等價(jià)于 document.createElement('img')。
正常情況下，我們使用下面方法加載圖片，是能能夠獲取到onload事件的：
const img = new Image();
img.src = 'picture.jpg';
img.onload = () => {
console.log('success');
}
但是如果你需要加載的圖片是base64圖片時(shí)，可能是因?yàn)闆](méi)有請(qǐng)求發(fā)出，onload事件是無(wú)法執(zhí)行的。
幾經(jīng)嘗試，最終考慮將base64圖片轉(zhuǎn)位ObjectUrl再加載，好處是無(wú)需后端，純前端即可兼容。移動(dòng)端兼容性也非常不錯(cuò)。
具體實(shí)現(xiàn)如下：
// base64轉(zhuǎn)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 可能有一些兼容性問(wèn)題，如果你在使用過(guò)程遇到，可以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 編輯過(guò)
400 186 1886
