在 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中文网其他相关文章！
