Javascript 跨源问题获取图像的base64编码

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

我的代码应该工作得几乎完美。我找到了包含指向全尺寸图像链接的类。我用jquery选择了所有这些。我正在使用JSZip编译图像。但是JSZip需要用base64编码的图像数据。在仔细研究了各种方法之后，几乎一致认为在画布上绘制图像并将图像转换为base64是最好的方法。但是，由于4chan提供了指向其图像的链接，而不是站点中的链接，因此当我在画布上绘制链接图像时，画布会被“污染”，并且无法从中获取base64编码

我如何才能以不同的方式来实现这一点？有没有办法解决交叉起源的问题？我尝试将

crossorigin=“anonymous”

添加到我正在创建的图像中，但没有效果。

请检查可用于对二进制数据进行base-64编码的

在这种情况下，不需要画布，只需使用画布即可

如果您使用画布，并且图像是例如JPEG，那么您也会得到一个重新压缩的图像（质量降低），并且速度会较慢，因此在这种情况下，我不推荐使用画布

---

在转换为base64时，您可以在图像路径之前使用代理URL（），以避免跨源问题

如果您要传送的图像与您的网页不在同一台服务器上，您将始终得到一个受CORS污染的画布。一个常见的解决方法是将imagedata包装在JSONP中，JSONP将imagedata作为“脚本”交付。脚本不受CORS约束，因此不会污染您的画布。btoa（）看起来确实适合我，但它只将字符串转换为base64。我如何获得字符串形式的图像？@jchitel-ay，是的，你说得对。我忘了它只带了一根弦（答案的基础…8）。很抱歉。请查看最后一个链接中的解决方案-它将二进制数据编码到base64。

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
})