Base64文字列と画像間の変換の例

1. Base64 文字列を画像に変換する原理は、Base64 文字列が img タグの src 属性として使用されている場合、それが有効であればプレビューできることです。ダウンロードする場合は、新しい a タグを作成し、a タグの href 属性を Base64 文字列に設定し、a タグの download 属性をファイル名に設定して、a タグのクリック イベントを手動でトリガーします。 js を選択すると、ダウンロード動作が完了します (ブラウザによっては、ダウンロード ディレクトリを選択するか、デフォルトのディレクトリを使用する必要がある場合があります)。

2. 画像をbase64文字列に変換する

画像のsrcタグを指定する方法と、画像ファイルをアップロードする方法の2種類があります。

3. 画像の src タグの指定

は、canvas タグを使用して行う必要があります。
利点は...写真を拡大できることです。

欠点は、ドメインを越えることができないことです (ただし、他のドメインも越えることはできません)

手順は次のとおりです:
1. ユーザーが src を提供します
2. 新しい img タグを作成し、src を img タグに設定します
3 img タグがロードされ (onload コールバック トリガー)、次のコードを実行し続けます:
4. 画像をキャンバスに書き込みます (このとき、画像のサイズに応じてキャンバスのサイズを設定することも、画像を作成することもできます)キャンバスのサイズに合わせて調整します)
5. Canvas String の toDataURL メソッドを通じて Base64 を取得します

4. ファイルのアップロード フォームは、type=file と FileReader オブジェクトをサポートする必要があります。を使用する必要があります
利点は、ファイルを選択すると自動的に変換されるため、操作が簡単であることです。
シーケンスは次のとおりです。
1. type=file の input タグが onchange イベントをトリガーすると、次の命令の実行を開始します。
2. 新しい FileReader オブジェクトを作成して、ファイルのコンテンツを読み取ります。
4 .読み取りが成功すると (onload コールバック関数がトリガーされる)、base64 文字列はコールバック関数のパラメーター e と属性 e.target.result を通じて取得できます。
5 Base64 文字列は必須のコンテンツです。 。

5.DEMO ページ:

画像を Base64 文字列に変換する

Base64 文字列を画像に変換する

関連推奨事項:

画像を Base64 文字列に変換する PHP コード

以上がBase64文字列と画像間の変換の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。