如何使用 Canvas 元素將圖像 URL 轉換為 Base64？

如何將圖片URL 轉換為Base64

當您需要獲取圖片的URL 並將其用於存儲或進一步處理時，請將其轉換為Base64 表示變得至關重要。讓我們探索一種實現此轉換的有效方法：

利用Canvas 元素

此方法依賴HTML5 canvas 元素，該元素受到廣泛支援並允許在JavaScript 中進行畫布操作：

<code class="html"><img  src="/static/imghwm/default1.png" data-src="https://example.com/image.jpg" class="lazy" id="imageid" alt="如何使用 Canvas 元素將圖像 URL 轉換為 Base64？" ></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 類型為前綴。

在我們的程式碼中，我們透過使用具有正規表示式的替換方法來最佳化Base64 字串，該正規表示式刪除了MIME 類型和「,」：

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

這使我們能夠獲得純Base64 字串，可用於您可能需要的任何目的，例如將其發送到網路服務或儲存在本地。

以上是如何使用 Canvas 元素將圖像 URL 轉換為 Base64？的詳細內容。更多資訊請關注PHP中文網其他相關文章！