Javascript で画像 URL を Base64 に変換するにはどうすればよいですか?-jsチュートリアル-php.cn

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

Susan Sarandon

リリース： 2024-10-31 06:22:30

オリジナル

270 人が閲覧しました

How to Convert an Image URL to Base64 in Javascript?

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

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

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

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 でエンコードされた文字列を返します。

HTML から画像要素を取得します:

<code class="html"><img id="imageid" src="https://www.google.de/images/srpr/logo11w.png"></code>

ログイン後にコピー

getBase64Image() 関数を使用して画像を Base64 に変換します:

<code class="javascript">var base64 = getBase64Image(document.getElementById("imageid"));</code>

ログイン後にコピー

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

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