href 标签下载属性 - 如何使其强制下载外部托管的图像？

Question

我想制作一个<a href链接，点击后会强制浏览器打开“另存为”对话框。HTML5download属性的使用应该在所有现代浏览器上都有这种行为。

当目标是外部托管的图像文件时，这不起作用。该<a href链接将导航到图像而不是下载它。（使用 Imgur 和 Tumblr 上托管的图像进行测试）

<a href="https://i.stack.imgur.com/440u9.png" download>
  <img src="https://i.stack.imgur.com/440u9.png" width="200"/>
</a>

例如，如果图像本地托管在您的服务器上，类似的 HTML 代码确实有效

<a href="440u9.png" download>
  <img src="440u9.png" width="200"/>
</a>

另一个例子 - 这将在W3Schools Tryit Editor 中工作，但如果您将 HTML 复制到另一个沙箱（如 JSFiddle）中将不起作用

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download>
  <img src="https://www.w3schools.com/images/myw3schoolsimage.jpg" width="104" height="142">
</a>

---

探讨的可能原因：

• 坏图片网址：不，网址是好的，您可以在浏览器中将网址作为纯图片打开
• 带有 https 的链接：出于安全考虑，不能以这种方式使用：不，https:如果 URL 指向同一个域，则带有的 URL 很好，在 W3Schools Tryit Editor 中进行了测试
• 服务器端重定向：一个http://...链接可以重定向到，https://...所以这可能是失败的原因，但https://...链接也不起作用
• 特定主机抑制服务器上的下载属性？ 这甚至可能吗？下载属性应该只控制客户端浏览器的动作吗？

任何解决方法？我尝试过此处和此处讨论的 Javascript 下载方法，但这些方法最终都涉及类似于单击href链接的浏览器操作。

对下载链接的深入讨论，包括application/force-download在服务器上的 PHP 设置

相关 StackOverflow 问题：Force external download url（答案似乎不正确）

Answer 1

我的解决方法：将图像下载到画布，然后将画布图像下载到本地驱动器。

代码：

    <canvas id="downloadCanvas"></canvas>

    <script>
        var strDataURI = "https://78.media.tumblr.com/33f1b72778ca7352979b0f4555f08f02/tumblr_pfega8eUyH1r68v93o1_640.jpg";
        var img = new Image;
        img.crossOrigin = "Anonymous";
        img.src = strDataURI;


        var canvas = document.getElementById('downloadCanvas');
        var ctx = canvas.getContext('2d');

        img.onload = function(){

          canvas.width = img.width;
          canvas.height = img.height;
          ctx.drawImage(img,0,0);

          var dwBtn = document.getElementById("dw0");
            var dwLink = canvas.toDataURL('image/jpeg', 1.0);

          download(dwLink, "image.jpeg");
        };


    function download(dataurl, filename) {
      var a = document.createElement("a");
      a.href = dataurl;
      a.setAttribute("download", filename);
      var b = document.createEvent("MouseEvents");
      b.initEvent("click", false, true);
      a.dispatchEvent(b);
      return false;
    }

</script>

正如OP所要求的，他需要捕获的图像具有相同的扩展名。（伪代码）

更改这些行：

  var ext = ExtensionFromUrl(url);
  var fileName = NameFromUrl(url);

      var dwLink = canvas.toDataURL('image/'+ext, 1.0);
      download(dwLink, fileName+"."+ext);

请注意：此答案不适用于 GIF 图像。此外，由于它们是捕获的图像，透明通道将会丢失！