ホームページ  >  記事  >  ウェブフロントエンド  >  Javascript で画像 URL を Base64 に変換するにはどうすればよいですか?

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

Susan Sarandon
Susan Sarandonオリジナル
2024-10-31 06:22:30180ブラウズ

How to Convert an Image URL to Base64 in Javascript?

画像 URL を Base64 に変換する方法

画像入力から画像 URL が与えられ、それを Base64 に変換する必要があります。 Web サービスに送信して、画像をローカルに保存できます。使用している現在のコードでは URL が Base64 に変換されません。

これを実現するには、次の手順を使用できます。

  1. JavaScript 関数を作成して、画像を Base64 に変換します:
<code class="javascript">function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/?[A-z]*;base64,/);
}</code>

この関数は画像要素 (img) を入力として受け取り、Base64 でエンコードされた文字列を返します。

  1. HTML から画像要素を取得します:
<code class="html"><img id="imageid" src="https://www.google.de/images/srpr/logo11w.png"></code>
  1. getBase64Image() 関数を使用して画像を Base64 に変換します:
<code class="javascript">var base64 = getBase64Image(document.getElementById("imageid"));</code>

これにより、画像が Base64 に変換され、結果が Base64 変数に保存されます。その後、base64 変数を Web サービスに送信して、画像をローカルに保存できます。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。