web-dev-qa-db-ja.com

JavaScriptの有効なbase64画像文字列でのDOM例外5 INVALID CHARACTERエラー

OSでローカルにダウンロードして表示できるように、画像のbase64文字列をバイナリにデコードしようとしています。

データURIの前書き（data：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文字まで）

javascriptimagebase64decode
21
user1387717

しばらくの間、頭を壁にぶつけていました。

この問題には、いくつかの原因が考えられます。 1）Utf-8の問題。良い書き込みがあり、そのためのソリューションがここにあります。 http://monsur.hossa.in/2012/07/20/utf-8-in-javascript.html

私の場合も、それをatobに渡す前に、すべての空白が文字列の外にあることを確認する必要がありました。例えば.

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

本当にイライラしたのは、base64がPythonではbase64ライブラリを使用して正しく解析されたが、JSでは解析されなかったことです。

38
Ross117

これはb64の一部として提供されているため、b64の前にある_data:audio/wav;base64,_を削除する必要がありました。

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

var processed = atob(data);

3
kentrh