javascript 中有效 base64 图像字符串的 DOM 异常 5 无效字符错误

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14695988/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 17:39:05  来源:igfitidea点击:

DOM Exception 5 INVALID CHARACTER error on valid base64 image string in javascript

javascriptimagebase64decode

提问by user1387717

I'm trying to decode a base64 string for an image back into binary so it can be downloaded and displayed locally by an OS.

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

The string I have successfully renders when put as the src of an HTML IMG element with the data URI preface (data: img/png;base64, ) but when using the atob function or a goog closure function it fails.

当作为带有数据 URI 前言 (data: img/png;base64, ) 的 HTML IMG 元素的 src 放置时,我成功呈现的字符串但是当使用 atob 函数或 goog 闭包函数时它失败了。

However decoding succeeds when put in here: http://www.base64decode.org/

然而,当放入此处时解码成功:http: //www.base64decode.org/

Any ideas?

有任何想法吗?

EDIT: I successfully got it to decode with another library other than the built-in JS function. But, it still won't open locally - on a Mac says it's damaged or in an unknown format and can't get opened.

编辑:我成功地让它用内置 JS 函数以外的另一个库解码。但是,它仍然无法在本地打开 - 在 Mac 上说它已损坏或格式未知且无法打开。

The code is just something like:

代码就像这样:

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

the base64 string itself is too long to display here (limit is 30,000 characters)

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

回答by Ross117

I was just banging my head against the wall on this one for awhile.

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

There are a couple of possible causes to the problem. 1) Utf-8 problems. There's a good write up + a solution for that here. http://monsur.hossa.in/2012/07/20/utf-8-in-javascript.html

导致此问题的可能原因有两个。1) UTF-8 问题。这里有一篇很好的文章+一个解决方案。 http://monsur.hossa.in/2012/07/20/utf-8-in-javascript.html

In my case, I also had to make sure all the whitespace was out of the string before passing it to atob. e.g.

就我而言,我还必须确保在将其传递给 atob 之前所有空格都在字符串之外。例如

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

What was really frustrating was that the base64 parsed correctly using the base64 library in python, but not in JS.

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

回答by kentrh

I had to remove the data:audio/wav;base64,in front of the b64, as this was given as part of the b64.

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

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

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

var processed = atob(data);

var processed = atob(data);