javascript - 获取图像的 Base64 编码的跨源问题

Question

我正在为 4chan 制作一个“简单”书签(可能可以扩展到其他站点)，它将下载当前线程中的所有图像作为 zip 存档。 4chan 线程中显示的图像只是缩略图。图像本身以链接形式提供，可以通过单击缩略图进行访问。

我的代码应该几乎完美地工作。我找到了包含全尺寸图像链接的类。我用 jquery 选择所有这些。我正在使用 JSZip 来编译图像。但 JSZip 需要以 base64 编码的图像数据。在搜寻了执行此操作的方法之后，似乎几乎一致认为将图像绘制到 Canvas 上并将图像转换为 base64 这种方式是最好的方法。然而，由于 4chan 提供了其图像的链接，而不是它们就在网站中，因此当我在 Canvas 上绘制链接图像时， Canvas 会被“污染”，并且无法从中获取 Base64 编码。

我怎样才能以不同的方式做到这一点才能发挥作用？有没有办法解决跨源问题？我尝试将 crossorigin="anonymous" 添加到我正在创建的图像中，但它不起作用。

Answer 1

var getDataUri = function (targetUrl, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function () {
        var reader = new FileReader();
        reader.onloadend = function () {
            callback(reader.result);
        };
        reader.readAsDataURL(xhr.response);
    };
    var proxyUrl = 'https://cors-anywhere.herokuapp.com/';
    xhr.open('GET', proxyUrl + targetUrl);
    xhr.responseType = 'blob';
    xhr.send();
};
getDataUri(path, function (base64) {
    // base64 availlable here
})

转换为 base64 时，您可以在图像路径之前使用代理 URL ( https://cors-anywhere.herokuapp.com/ ) 以避免跨域问题