我的主要目标是允许用户使用现代浏览器资源ZIP并在元素中下载所有Instagram加载的图像。我目前正在使用JSZip lib接受文件作为base64数据和二进制数据。为此，我需要通过tag和getImageData（）来访问原始数据。
Instagram API通过以下API端点提供了一组我需要的最新图像：
https://api.instagram.com/v1/tags/snow/media/recent.
Instagram指定了一些跨域政策：
https://api.instagram.com/crossdomain.xml
Instagram API以CDN方式提供文件网址，从而产生如下图像地址：
http://scontent-a.cdninstagram.com/hphotos-xaf1/outbound-distilleryimage8/t0.0-17/OBPTH/57dc39f0a10c11e3a9af0eddfe5726fc_6.jpg
我已经尝试过这种解决方案了：
<HTML>
<canvas id="canvas"></canvas>
<HTML>
<SCRIPT>
var canvas = $("#canvas1)[0];
var ctx = canvas.getContext('2d');
var img = new Image();
img.crossOrigin = 'anonymous';
img.src = 'http://scontent-b.cdninstagram.com/hphotos-xfp1/outbound-distilleryimage2/t0.0-17/OBPTH/2d160152a10b11e39df312c88b6315b6_6.jpg'
img.onload = function(x) {
ctx.drawImage(img, 0, 0);
canvas.toDataURL("image/jpg"); Raise the following error:
}
<SCRIPT>
*XMLHttpRequest cannot load http://scontent-b.cdninstagram.com/hphotos-xfp1/outbound-distilleryimage2/t0.0-17/OBPTH/2d160152a10b11e39df312c88b6315b6_6.jpg?_t=11234. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8084' is therefore not allowed access*
看起来crossdomain.xml与CDN提供的内容无关。所以，当我尝试从画布调用getImageData时，我陷入了污点画布警告我渲染了Image
在img.src属性不影响结果之前指定img.crossOrigin ='Anonymous'。
右键点击浏览器中的图片，我可以从Instagram CDN下载当前渲染的图像。奇怪？
似乎CDN不允许JSONP请求获取图像内容。 （不调用图像url的回调参数）。我试过jQuery ajax。
JSZip通过Uint8Array允许使用base64格式的文件甚至二进制数据。我已经尝试过XMLHttpRequest将二进制映像下载到CDN，但得到了相同的cross-oringin警告，取消了请求。
答案 0 :(得分：0)
Instagram允许用户下载照片，但您要做的是通过javascript压缩画布的内容。设计不允许这样做，因为你的javascript代码可能在邮件比特（缓冲区溢出等）方面存在安全问题，从而引起用户的安全问题。解决办法是将亚马逊上的Instagram CDN问到include these lines，因为他们现在不支持他们：
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
同时，您可以使用正确的CORS标头构建own server that proxies the images，如下所述：
var http = require('http');
var request = require('request');
http.createServer(function(req, res) {
if (req.url.match(/path=(.*)/))) {
res.setHeader('access-control-allow-origin'), '*');
request.get(req.url.match(/path=(.*)/)[1].pipe(res);
} else {
res.statusCode = 404;
res.end();
}
}).listen(8000);
这将允许您在客户端使用JSZip（并且您可以在Heroku上免费托管它）。