Canvas 要素を使用して画像 URL を Base64 に変換する方法

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

画像の URL を取得し、保存またはさらなる処理に利用して、画像の URL を Base64 に変換する必要があるシナリオでは、 Base64 表現が重要になります。この変換を実現する効果的な方法を見てみましょう:

Canvas 要素の利用

このアプローチは、広くサポートされており、JavaScript での Canvas 操作を可能にする HTML5 Canvas 要素に依存しています:

<code class="html"><img id="imageid" src="https://example.com/image.jpg"></code>

<code class="javascript">// Created by Md. Hasan Mahmud
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\/(png|jpg|jpeg|svg)*;base64,/, "");
}

var base64Image = getBase64Image(document.getElementById("imageid"));</code>

canvas.toDataURL() を利用すると、画像がキャンバス上に描画され、そのデータが Base64 文字列に変換されます。結果の文字列には、MIME タイプのプレフィックスが付いた画像データが含まれます。

コードでは、MIME タイプと「,」:

<code class="javascript">var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg|jpeg|svg)*;base64,/, "");</code>

これにより、純粋な Base64 文字列を取得できるようになり、Web サービスへの送信やローカルでの保存など、必要なあらゆる目的に対応できるようになります。

以上がCanvas 要素を使用して画像 URL を Base64 に変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。