画像を LocalStorage に保存して新しいページに表示するにはどうすればよいですか?

画像を LocalStorage に保存し、新しいページに表示する

Web フォームを使用する場合、多くの場合、画像のアップロードと画像の処理が必要になります。後で表示できるように保存しておきます。この記事では、画像をアップロードし、localStorage に保存し、次のページに表示するための包括的なソリューションを提供します。

画像のアップロードと表示

アップロードして表示するには現在のページに画像を表示するには、type 属性が「file」に設定された HTML 入力フィールドと、readURL 関数を呼び出す onchange イベント ハンドラーを使用します。この関数は、FileReader API を使用して、選択した画像ファイルを読み取り、画像要素の src 属性を使用してページに表示する必要があります。

画像を LocalStorage に保存する

ユーザーがフォームの残りの部分に入力して「保存」ボタンをクリックすると、画像を含むすべてのフォーム入力が localStorage として保存されます。文字列。画像を保存するには、getElementById 関数を使用してページ上の画像要素を取得し、応答で提供されるような関数を使用してそれを Base64 文字列に変換し、その文字列を localStorage 値として保存します。

新しいページに画像を表示する

次のページで、src 属性が空の画像を作成します。ページが読み込まれるときに、localStorage.getItem 関数を使用して、localStorage から画像の Base64 文字列を取得し、画像データ形式を示すプレフィックス data:image/png;base64 を使用してそれを画像の src 属性に適用します。

以上が画像を LocalStorage に保存して新しいページに表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。