Question

我有一个发送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})')

我如何解决这个问题才能在所有浏览器中使用？

感谢。

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

base64中的图片未在Safari

1 个答案: