单击时下载 png 图像 Bootstrap 4 和 JavaScript答案

【问题标题】：Downloading a png image when click on it Bootstrap 4 and JavaScript单击时下载 png 图像 Bootstrap 4 和 JavaScript
【发布时间】：2018-08-10 15:39:09
【问题描述】：

我想一点击图片就下载它。图片本身是 SVG，但我有一个 PNG 图像的 URL。我检查了内容配置是附件，是的，当我直接复制 URL 时，立即开始下载。

我正在使用 Bootstrap 4

功能

function downloadPNGImage(linkElement) {
    var myDiv = document.getElementById('download-area');
    var myImage = myDiv.children[0];
    let downloadLink = myImage.src + "&format=png";
    linkElement.setAttribute('download', downloadLink);
    linkElement.href = downloadLink;
}

而图像本身是：

            <div class="col-lg-5 order-first order-md-last img-fluid" id="download-area">
                <img src="https://bananomonkeys.herokuapp.com/image?address=ban_1ttyqinz739g88tteqzyg3hwahg9oxbks8amsywqmim7j4afih7n9d1ssqjf&bg=t"
                    class="loaded" id="generated-monKey" alt="" href="#" onclick="downloadPNGImage(this)" download>
            </div>

因此，当我添加“&format=png”时，此 URL 不再是内联 SVG，而是我想下载的附加 PNG，但由于某种原因，它不起作用。

【问题讨论】：

标签： javascript html css bootstrap-4

【解决方案1】：

稍微修改一下函数：

function downloadPNGImage(linkElement) {
    var myDiv = document.getElementById('download-area');
    var myImage = myDiv.children[0];
    let downloadLink = myImage.src + "&format=png";
    linkElement.setAttribute('download', downloadLink);
    linkElement.href = downloadLink;
    linkElement.click();
}

修改 onclick 处理程序：

onclick="downloadPNGImage(document.createElement('a'))"

【讨论】：

【解决方案2】：

download 属性不适用于<img> 标记，您最好将图像包装在<a> 标记中，然后将下载属性添加到该标记中。在您的 javascript 中，您将 .href 添加到 img 标记，这又不会做任何事情。

【讨论】：

【解决方案3】：

我会用生成的链接打开新窗口。所以代码看起来像这样：

function downloadPNGImage(linkElement) {
    var myDiv = document.getElementById('download-area');
    var myImage = myDiv.children[0];
    let downloadLink = myImage.src + "&format=png";
    window.open(downloadLink);
}

【讨论】：

【解决方案4】：

为什么要使用 JS？

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_download

或者如果您需要跨域：

https://stackoverflow.com/a/49886131/9590657

这个问题和你的问题很接近：Force browser to download image files on click

【讨论】：