如何使用 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中文网其他相关文章！