如何使用 JavaScript 取得圖像的 Base64 資料 URL？

如何使用 JavaScript 檢索圖像資料 URL

在 Web 開發中，存取網頁上的圖像內容通常很有用。這可以透過 JavaScript 來實現，允許開發人員操作和利用圖像數據，而無需單獨下載。

其中一個用例涉及獲取瀏覽器已載入的圖像的 Base64 編碼表示形式。這在 Mozilla Firefox 中使用 Greasemonkey 腳本時特別有用。

要取得圖像資料 URL，需要使用 canvas 元素。以下是您可以使用的程式碼：

function getBase64Image(img) {
  // Create a canvas with dimensions matching the image
  const canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;

  // Copy the image data onto the canvas
  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);

  // Get the base64-encoded image
  const dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

但是，請務必注意，此方法僅適用於與頁面相同網域的圖像。或者，您可以在圖像標籤上指定 crossOrigin="anonymous" 屬性，並確保伺服器支援 CORS。

請記住，此方法提供圖像的重新編碼版本，而不是原始檔案。為了獲得相同的結果，請考慮使用其他方法，例如 Kaiido 的答案。

以上是如何使用 JavaScript 取得圖像的 Base64 資料 URL？的詳細內容。更多資訊請關注PHP中文網其他相關文章！