Javascript を使用して画像 URL を Base64 に変換するにはどうすればよいですか?

画像 URL を Base64 に変換する

Web 開発シナリオでは、多くの場合、実際の画像ファイルにアクセスせずに、処理または保存するために画像を送信する必要があります。これを容易にするために、画像の URL を Base64 形式に変換して、効率的な送信を可能にすることができます。

特定のケースでは、画像の URL (例: "https://example.com/image. png") はユーザーの入力から取得されます。 JavaScript を使用して Base64 に変換するには:

1. 新しい画像要素を作成します: この画像要素は、処理用の画像の一時的な表現として機能します。

<code class="javascript">const img = new Image();
img.src = imageUrl; // Replace imageUrl with the URL you obtained</code>

2. キャンバス上に画像を描画します: このステップでは、キャンバス上に画像のピクセル完璧なコピーを作成します。

<code class="javascript">const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);</code>

3. キャンバスを Base64 に変換します: toDataURL() メソッドを使用して、キャンバスを Base64 でエンコードされた文字列に変換します。

<code class="javascript">const base64Image = canvas.toDataURL("image/png");</code>

4. データ URI プレフィックス: toDataURL() メソッドは、追加情報を含むデータ URI を返します。正規表現でプレフィックスを削除すると、純粋な Base64 データが取得されます。

<code class="javascript">const regex = /^data:image\/[A-z]*;base64,/;
const base64Data = base64Image.replace(regex, "");</code>

これで、base64Data には、画像の Base64 エンコード表現が含まれます。この文字列を Web サービスに転送してさらに処理することも、システム上にローカルに保存することもできます。

以上がJavascript を使用して画像 URL を Base64 に変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。