在 JavaScript 中获取图像数据 URL？

Question

我有一个带有一些图像的常规 HTML 页面（只是常规的 <img /> HTML 标签）。我想获得他们的内容，最好是base64编码，而不需要重新下载图像（即它已经被浏览器加载，所以现在我想要内容）。

我很想用 Greasemonkey 和 Firefox 来实现。

原文由 Detariael 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

注意： 这仅适用于图像来自与页面相同的域，或者具有 crossOrigin="anonymous" 属性并且服务器支持 CORS。它也不会给你原始文件，而是一个重新编码的版本。如果您需要结果与原始结果相同，请参阅 Kaiido 的答案。

---

您将需要创建具有正确尺寸的画布元素并使用 drawImage 函数复制图像数据。然后，您可以使用 toDataURL 函数获取具有 base-64 编码图像的 data: url。请注意，图像必须完全加载，否则您将返回一个空（黑色，透明）图像。

会是这样的。我从未编写过 Greasemonkey 脚本，因此您可能需要调整代码以在该环境中运行。

 function getBase64Image(img) {
 // Create an empty canvas element
 var canvas = document.createElement("canvas");
 canvas.width = img.width;
 canvas.height = img.height;

 // Copy the image contents to the canvas
 var ctx = canvas.getContext("2d");
 ctx.drawImage(img, 0, 0);

 // Get the data-URL formatted image
 // Firefox supports PNG and JPEG. You could check img.src to
 // guess the original format, but be aware the using "image/jpg"
 // will re-encode the image.
 var dataURL = canvas.toDataURL("image/png");

 return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
 }

获取 JPEG 格式的图像不适用于旧版本（大约 3.5）的 Firefox，所以如果你想支持它，你需要检查兼容性。如果不支持编码，则默认为“image/png”。

原文由 Matthew Crumley 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

此函数获取 URL，然后返回图像 BASE64

 function getBase64FromImageUrl(url) {
    var img = new Image();

    img.setAttribute('crossOrigin', 'anonymous');

    img.onload = function () {
        var canvas = document.createElement("canvas");
        canvas.width =this.width;
        canvas.height =this.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0);

        var dataURL = canvas.toDataURL("image/png");

        alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
    };

    img.src = url;
}

像这样称呼它： getBase64FromImageUrl("images/slbltxt.png")

原文由 MoniR 发布，翻译遵循 CC BY-SA 3.0 许可协议