JavaScriptのbase64コードが文字化けする
May 16, 2023 am 09:25 AM最近、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==
- 非 ASCII 文字の場合、 window.btoa() メソッドではエンコード エラーが発生します。さらに、、/、= 文字などの特定の文字は、エンコード エラーを引き起こす可能性があります。 場合によっては、ブラウザが Base64 エンコード後に
- 改行文字を自動的に追加し、エンコード エラーが発生することがあります。
- 非 ASCII 文字のエンコード エラーを解決するには、js などのサードパーティ ライブラリを使用できます。 -base64 または CryptoJS。UTF -8 でエンコードされたバイナリ データをサポートします。例:
var str = "你好世界"; var encodedString = window.btoa(unescape(encodeURIComponent(str))); // 使用第三方库 console.log(encodedString); //5L2g5aW977yM5LiW55WM
- 自動追加と
- 改行を避ける: 画像またはバイナリ データをエンコードする場合、配列バッファまたは 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); // 编码,避免自动添加和 换行符
改行文字は含まれません。
- バイナリ データを正しくエンコードする: バイナリ データの配列を文字列に変換する場合は、正しいエンコード方法 (通常は TextDecoder API または TextEncoder API) を使用する必要があります。例:
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);
以上がJavaScriptのbase64コードが文字化けするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

人気の記事

人気の記事

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











UseEffectとは何ですか?副作用を実行するためにどのように使用しますか?

JavaScriptの高次関数とは何ですか?また、より簡潔で再利用可能なコードを書くためにどのように使用できますか?

usecontextとは何ですか?コンポーネント間で状態を共有するためにどのように使用しますか?

制御されたコンポーネントと制御されていないコンポーネントの利点と短所は何ですか?
