Safari中不显示base64中的图像

Question

我有一个PHP代码可以发送一个base64字符串，如下所示：

data:image/jpeg;base64,/9j/4XxuRXhpZgAASUkqAAgAAAAMAAABBAABAAAAAAgAAAEBBAABAAAAAAYAAA8BAgAIAAAAngAAABABAgAJAAAApgAAABIBAwABA............

在我的JavaScript代码中，我有一个编辑器，将图像放在下面：

 var img = new Image();
    img.src = response.dataURL;
    editor.updateImage(img);

该图像已加载到FireFox，Chrome中，但在Safari中出现以下错误： TypeError: '[object BlobConstructor]' is not a constructor (evaluating 'new Blob([new Uint8Array(array)], {type: mimeString})')

我如何解决此问题使其在所有浏览器中都能正常工作？

谢谢。

Answer 1

一种可能的解决方案是在设置img.src之后设置img.src ：

var img = new Image();
img.src = response.dataURL;
img.crossOrigin = 'Anonymous';
// Now set your image
editor.updateImage(img);

另一个解决方案来自此处提供的答案：

问题似乎是Safari不会渲染没有多个可以被4整除的字符的base64图像。此问题的解决方案是使用'='字符在编码字符串的末尾填充。 这是一个基本算法：

// b64str = 's/3eea4sp...' (or any base 64 encoded string)
while (b64str.length % 4 > 0) {
    b64str += '=';
}

编辑：

您可以尝试从已弃用的BlobBuilder切换到Blob ：

var imageBlob = new Blob([response.dataURL], {type: mimeString});    
var objurl = window.URL.createObjectURL(imageBlob));
var img = new Image();

img.src = objurl;
editor.updateImage(img);