使用img.onload事件加载base64图片的兼容问题

平时加载图片的方法

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

最近使用这种方式加载base64的图片，在ipone6 plus（ios9）中，base64的图片没有加载成功，而jpg 格式的照片可以成功加载

解决方案

• 方案一：将base64转成file对象，让服务端返回一个http的图片链接

  • 优点：无兼容性问题
  • 缺点：多一次请求，且图片加载依赖网速

• 方案二：将base64转成objectUrl

  • 优点：无网络请求
  • 缺点：兼容性，PC端慎用

objectUrl

• 兼容性

  

  image.png

image.png

• 相关代码

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;
        });
    }