base64 中的图像未在 Safari 中显示答案

【问题标题】：Image in base64 not displaying in Safaribase64 中的图像未在 Safari 中显示
【发布时间】：2018-01-02 09:19:41
【问题描述】：

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

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

请问如何解决这个问题以在所有浏览器中工作？

谢谢。

【问题讨论】：

只有野生动物园吗？
请在写问题之前阅读您收到的错误消息。您的问题是 Blob 不是构造函数。这意味着您的 Safari 版本不支持new Blob，但仍然了解Blob。这意味着您使用的是 Safari 5.1 ~ 6（5 岁）。这意味着您对网络上的任何恶意软件都敞开了大门。这意味着您应该立即扔掉它并使用 VirtualMachine，甚至更好的是真正的 osX 在 Safari 上进行测试。 Apple 确实在 2012 年停止了他们的 Windows 疯狂行为，并且从那时起就再也没有提供过一个安全补丁。

标签： javascript safari

【解决方案1】：

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

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

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

问题似乎是 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);

【讨论】：

我现在在 chrom InvalidCharacterError 中添加了 pad (=)：字符串包含无效字符
为 Safari 已弃用的 BlobBuilder 添加了一个解决方法，也许可行？
我找到了一些关于 blob 的链接，但我没有看到如何在我的编辑器中而不是图像中使用它。
对 blob 有什么帮助吗？
编辑了我的答案。我无法访问 Safari，因此无法亲自测试解决方案，抱歉。