跨地域下载js格式的图片

Question

我使用的是Chrome 79。

我正在尝试开始下载html页面中的图像。镜像与网页位于同一服务器上，但通过nginx服务器通过不同的端口提供服务。这显然把我带到了跨域安全问题上。

首先，我尝试使用标准

var a = document.createElement('a');
a.download = "file.bmp";
a.href = "http://xxxxxxx/xxx/somefile.bmp";
document.body.appendChild(a);
a.click();
a.remove();

有趣的是，这会使我的图像显示在新的选项卡中，而不是下载。我想这是由于cors的原因吧？

在阅读了关于此主题的讨论后：Chrome 65 blocks cross-origin . Client-side workaround to force download?

我尝试使用fetch函数来使用这里给出的方法。不幸的是，这并没有解决我的问题。我得到一个“不透明”类型的响应，而我的blob是未定义的...

var url = "http://xxxxxxxxx/xxx/somefile.bmp";
fetch(url, {
  mode: 'no-cors'})
  .then(function(response){handleBlob(response);})      
  .catch(e => console.error(e));

-------

function handleBlob(response)
{
   var blob = response.blob;
   var blobUrl = URL.createObjectURL(blob);
   var ImageTest = document.getElementById("DummyLink");      
   ImageTest.download = "file.bmp";
   ImageTest.href = blobUrl;
   ImageTest.click();           
}

我认为这一切都很奇怪-资源的服务器名称与网页的服务器名称相同，所以我假设这里没有真正的安全危险……

任何关于如何触发将映像下载到磁盘的建议或变通方法都将不胜感激。

Answer 1

不是100%确定你想要做什么。

var url = 'http://webpage.com/images/images.jpg',
var img = document.createElement('img');
img.src = src;
document.getElementById("DummyLink").appendChild(img);