在 JavaScript 中获取图像数据 URL？

javascript firefox base64 image greasemonkey

2022-08-29 23:41:15

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

我很想用Greasemonkey和Firefox来实现这一点。

答案 1

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

您需要创建具有正确尺寸的 canvas 元素，并使用该函数复制图像数据。然后，您可以使用该函数获取具有 base-64 编码图像的数据：url。请注意，图像必须完全加载，否则您只会得到一个空的（黑色，透明的）图像。drawImagetoDataURL

它会是这样的。我从未编写过 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”。

答案 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")