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==
- 非 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 サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

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

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

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

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

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

ホットトピック









この記事では、functionコンポーネントでのデータフェッチやDOM操作などの副作用を管理するためのフックであるReactの使用Effectについて説明します。メモリリークなどの問題を防ぐための使用、一般的な副作用、およびクリーンアップについて説明します。

記事では、Connect()、MapStateToprops、MapDispatchToprops、およびパフォーマンスへの影響を説明するReduxストアに反応コンポーネントをReduxストアに接続します。

この記事では、ReactのUseContextを説明しています。これにより、小道具掘削を避けることで国家管理を簡素化します。再レンダーの削減により、集中状態やパフォーマンスの改善などの利点について説明します。

記事では、PreventDefault()メソッドを使用して、イベントハンドラーのデフォルト動作の防止、ユーザーエクスペリエンスの強化などの利点、およびアクセシビリティの懸念などの潜在的な問題について説明します。

この記事では、予測可能性、パフォーマンス、ユースケースなどの側面に焦点を当てた、Reactの制御されていないコンポーネントと制御されていないコンポーネントの利点と欠点について説明します。それらを選択する際に考慮することを要因についてアドバイスします。

ReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1)JSXはHTMLを埋め込み、開発をより直感的にします。 2)仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3)保守性を向上させるコンポーネントベースの管理UI。 4)国家管理とイベント処理は、インタラクティブ性を高めます。

VUE 2の反応性システムは、直接配列インデックス設定、長さの変更、およびオブジェクトプロパティの追加/削除と闘っています。開発者は、Vueの突然変異法とVue.set()を使用して、反応性を確保することができます。

この記事では、< route>を使用して、Reactルーターのルートの定義について説明します。パス、コンポーネント、レンダリング、子供、正確、ネストされたルーティングなどの小道具をカバーするコンポーネント。
