使用img.onload事件加載圖片的兼容問題

平時加載圖片的方法

let img = new Image();
img.onload = () => {
    ...
}
img.src = '.....'

最近使用這種方式加載base64的圖片，在ipone6 plus（ios9）中，base64的圖片沒有加載成功，而jpg 格式的照片可以成功加載

解決方案

• 方案一：將base64轉成file對象，讓服務端返回一個http的圖片鏈接

  • 優點：無兼容性問題
  • 缺點：多一次請求，且圖片加載依賴網速

• 方案二：將base64轉成objectUrl

  • 優點：無網絡請求
  • 缺點：兼容性，PC端慎用

objectUrl

• 兼容性

  

• 相關代碼

generateImgUrl(imgUrl, isCors = true) {
        return new Promise((resolve, reject) => {
            let img = new Image(),
                objectUrl = null;
            if (isCors) {
                img.setAttribute('crossOrigin', 'anonymous');
            }
            if (imgUrl.match(/^data:(.*);base64,/) && window.URL && URL.createObjectURL) {
                objectUrl = URL.createObjectURL(Tool._convertBase64ToBlob(imgUrl));
                imgUrl = objectUrl;
            }
            img.onload = () => {
                objectUrl && URL.revokeObjectURL(objectUrl);
                resolve(img);
            };
            img.onerror = err => {
                reject(err);
            };
            img.src = imgUrl;
        });
    }