时间戳

首页 > 解决方案 > 单击时下载 png 图像 Bootstrap 4 和 JavaScript

javascript - 单击时下载 png 图像 Bootstrap 4 和 JavaScript

问题描述

我想一点击就下载一张图片。图片本身是 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，但由于某种原因，它不起作用。

标签： javascripthtmlcssbootstrap-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;
    linkElement.click();
}

修改 onclick 处理程序：

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

推荐阅读