DOM Exception 5 INVALID CHARACTER 错误在 javascript 中的有效 base64 图像字符串上

Posted 2023-02-18

【中文标题】DOM Exception 5 INVALID CHARACTER 错误在 javascript 中的有效 base64 图像字符串上

【英文标题】：DOM Exception 5 INVALID CHARACTER error on valid base64 image string in javascript

【发布时间】：2013-01-19 16:45:47

【问题描述】：

我正在尝试将图像的 base64 字符串解码回二进制文件，以便操作系统可以在本地下载和显示它。

当作为带有数据 URI 前言（数据：img/png;base64，）的 html IMG 元素的 src 时，我已成功呈现的字符串，但在使用 atob 函数或 goog 闭包函数时失败。

但是在此处输入时解码成功：http://www.base64decode.org/

有什么想法吗？

编辑： 我成功地使用内置 JS 函数以外的另一个库对其进行解码。但是，它仍然无法在本地打开 - 在 Mac 上显示它已损坏或格式未知且无法打开。

代码是这样的：

imgEl.src = 'data:img/png;base64,' + contentStr; //this displays successfully
decodedStr = window.atob(contentStr); //this throws the invalid char exception but i just
//used a different script to get it decode successfully but still won't display locally

base64 字符串本身太长，无法在此处显示（限制为 30,000 个字符）

【参考方案1】：

我只是在这个墙上撞了一会儿。

这个问题有几个可能的原因。 1) UTF-8 问题。 here 有一篇很好的文章 + 一个解决方案。

在我的例子中，我还必须确保在将字符串传递给 atob 之前所有的空格都在字符串之外。例如

function decodeFromBase64(input) 
  input = input.replace(/\s/g, '');
  return atob(input);

真正令人沮丧的是，base64 在 python 中使用 base64 库正确解析，但在 JS 中却没有。

【讨论】：

谢谢！这是一个救生员。我在 Base64 中有一个长得可笑的 PDF，它在移动应用程序中产生错误，但在 Web 浏览器中工作。删除空格确实有效。

谢谢你。我有一个类似的问题，但它是一个尾随回车，只出现在 Safari 中。同样的方法修复了它。

Rails 显然经常会砍掉 base64，Chrome 会忽略空格，而 Safari 不会。您的 replace 建议让我的应用程序再次在 Safari 上运行。谢谢！

巨大的帮助。无法弄清楚为什么我的 atob 可以在 Chrome 和 FF 中工作，但不能在 IE 中工作。花了太长时间才找到这个。 :)

谢谢，这是救命稻草。

【参考方案2】：

我不得不删除 b64 前面的 data:audio/wav;base64,，因为这是 b64 的一部分。

var data = b64Data.substring(b64Data.indexOf(',')+1);

var processed = atob(data);