JavaScriptのbase64コードが文字化けする

最近、JavaScript を使用して画像やテキストを Base64 エンコードすると、多くの Web サイトでコードが文字化けする問題が発生しました。この状況は通常、エンコード方法またはエンコード プロセスのエラーによって発生します。これらの問題を解決するには、JavaScript の Base64 エンコーディングとそれを正しく使用する方法を深く理解する必要があります。

Base64 とは何ですか?

Base64 は、バイナリ データを ASCII 文字にエンコードする方法です。 3 つの 8 ビット バイトを 4 つの 6 ビット バイトに変換し、指定された文字セットの 64 文字の 1 つを使用して結果を ASCII 文字列に埋め込みます。データ送信中にバイナリデータが誤って処理されないように、通常は Base64 を使用してバイナリデータを ASCII 文字に変換します。電子メールやデータ転送によく使用されます。

JavaScript での Base64 の実装の使用

JavaScript には既に Base64 の実装があるため、アルゴリズムを自分で記述する必要はありません。 window.btoa() メソッドを使用して文字列を Base64 エンコードし、window.atob() メソッドを使用して文字列を逆デコードできます。これらのメソッドは ASCII 文字でのみ機能し、IE9 より前のブラウザではサポートされません。

例:

var str = "Hello World";
var encodedString = window.btoa(str); // 编码
var decodedString = window.atob(encodedString); // 解码
console.log(encodedString); // SGVsbG8gV29ybGQ=
console.log(decodedString); // Hello World

画像やその他のバイナリ データをエンコードする場合、それらをバイナリ データ ビューとして window.btoa() メソッドに渡す必要があります。例:

var byteArray = new Uint8Array([73, 69, 78, 68, 255, 216, 255]);
var encodedString = window.btoa(String.fromCharCode.apply(null, byteArray)); // 编码
console.log(encodedString); // SU5ET1+J/g==

#ここでは ##String.fromCharCode.apply(null, byteArray) を使用して、バイナリ データ ビューを通常の文字列に変換してエンコードします。

Base64 エンコードの文字化けの問題を解決する方法

Base64 エンコードの文字化けは、通常、次の理由によって発生します。

非 ASCII 文字の場合、 window.btoa() メソッドではエンコード エラーが発生します。さらに、、/、= 文字などの特定の文字は、エンコード エラーを引き起こす可能性があります。
1. 場合によっては、ブラウザが Base64 エンコード後に
2. 改行文字を自動的に追加し、エンコード エラーが発生することがあります。
   
バイナリ データをエンコードする場合は、正しい方法を使用して文字列に変換する必要があります。

これらの問題を解決する方法は次のとおりです:

非 ASCII 文字のエンコード エラーを解決するには、js などのサードパーティ ライブラリを使用できます。 -base64 または CryptoJS。UTF -8 でエンコードされたバイナリ データをサポートします。例:

1. var str = "你好世界";
   var encodedString = window.btoa(unescape(encodeURIComponent(str))); // 使用第三方库
   console.log(encodedString); //5L2g5aW977yM5LiW55WM

ここでは、unescape(encodeURIComponent(str)) を使用して UTF-8 でエンコードされた文字列を ASCII 文字列に変換し、window.btoa() を使用してそれをエンコードします。

自動追加と
2. 改行を避ける: 画像またはバイナリ データをエンコードする場合、配列バッファまたは Blob オブジェクトを使用してバイナリ データを渡すことができます。例:
   

var byteArray = new Uint8Array([73, 69, 78, 68, 255, 216, 255]);
var blob = new Blob([byteArray], {type: 'image/jpeg'});
var reader = new FileReader();
reader.onloadend = function() {
  console.log(reader.result);
};
reader.readAsDataURL(blob); // 编码，避免自动添加和
换行符

ここでは、Blob オブジェクトを使用してバイナリ データを渡し、FileReader オブジェクトを使用してそれをデータ URL に変換します。データ URL には、

改行文字は含まれません。

バイナリ データを正しくエンコードする: バイナリ データの配列を文字列に変換する場合は、正しいエンコード方法 (通常は TextDecoder API または TextEncoder API) を使用する必要があります。例:

3. var byteArray = new Uint8Array([73, 69, 78, 68, 255, 216, 255]);
   var decoder = new TextDecoder('utf-8');
   var str = decoder.decode(byteArray); // 将二进制数据数组转换为字符串
   var encodedString = window.btoa(str); // 编码
   console.log(encodedString);

ここでは、TextDecoder API を使用してバイナリ データ配列を UTF-8 でエンコードされた文字列に変換し、window.btoa() メソッドを使用してエンコードします。

結論

JavaScriptではエンコード・デコードにBase64を使用するのが有効ですが、実際のアプリケーションではエンコードエラーや文字化けを避けるため実装内容や注意事項に注意する必要があります。 。エンコードとデコードに正しいエンコード方法とサードパーティ ライブラリを使用すること、バイナリ データをエンコードするときに配列バッファまたは Blob オブジェクトを使用することは、Base64 文字化けの問題を解決するのに役立ちます。

以上がJavaScriptのbase64コードが文字化けするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。