Question

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

我的代码应该几乎完美。我发现该类包含指向全尺寸图像的链接。我用jquery选择所有这些。我正在使用JSZip来编译图像。但是JSZip需要在base64中编码的图像数据。在为这样做的方法进行鞭打后，似乎几乎一致的是将图像绘制到画布上并将图像转换为base64是最好的方法。但是，由于4chan提供了指向其图像的链接而不是它们在网站中的链接，当我将链接图像绘制到其上时，画布变得“污染”，并且我无法从中获得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时，您可以在图片路径前使用代理网址（https://cors-anywhere.herokuapp.com/）以避免跨源问题

Answer 2

~~检查window.btoa() (doc)可以用来对64位二进制数据进行编码。~~

在这种情况下不需要画布，而只需要download the data with "ajax" (SO)。

如果您使用画布并且图像是例如JPEG，您将获得重新压缩的图像（质量降低）并且它会更慢，因此在这种情况下我不推荐使用画布。

Here is a solution as well (SO)

获得图像的base64编码的跨源问题

2 个答案: