单击按钮即时下载图像

Question

我正在尝试制作简单的按钮，单击该按钮将下载图像。目前，当我单击它时，它是在空白页上打开图像，您应该在其中单击“另存为…”

我怎样才能“强制”浏览器下载它？

这是当前图像和按钮

<img src="{{ $thumb }}" class="img-responsive">
<a type="submit" download="{{ $thumb }}" href="{{ $thumb }}" class="btn btn-primary">
    Download Image
</a>

我试过了：

 download="{{ $thumb }}"

还

download="{{ $thumb }}" target="_blank"

还尝试将 <img...> 标签放在 <a href..> 标签中，但仍然无效。

原文由 user9538545 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以试试这个来强制下载图像。

但是，您不能下载不在您域中的内容，除非您使用的域接受跨域请求（例如： Imgur ）

您可以使用 HTML5 的 “下载” 属性，但您仍然无法加载跨源图像。

此外，以下方法也将支持旧版浏览器

 function forceDownload(link){
    var url = link.getAttribute("data-href");
    var fileName = link.getAttribute("download");
    link.innerText = "Working...";
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function(){
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(this.response);
        var tag = document.createElement('a');
        tag.href = imageUrl;
        tag.download = fileName;
        document.body.appendChild(tag);
        tag.click();
        document.body.removeChild(tag);
        link.innerText="Download Image";
    }
    xhr.send();
}

 <a href="#" data-href='https://i.imgur.com/Mc12OXx.png' download="Image.jpg" onclick='forceDownload(this)'>Download Image</a>

注意：您不能强制浏览器显示“另存为”对话框，因为它基于用户首选项。

原文由 Jones Joseph 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

<a href="/images/img.jpg" download> 添加这个你可以一键自动下载图片

注意：Edge 版本 12、IE、Safari 10（及更早版本）或 Opera 版本 12（及更早版本）不支持下载属性。

原文由 Lex V 发布，翻译遵循 CC BY-SA 3.0 许可协议