Question

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

我正在使用Bootstrap 4

功能

if(!this.breadType.equals("baguette") && !this.breadType.equals("brown rye")) {

图像本身是：

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;
}

因此，当我添加“＆format = png”时，此URL不再是嵌入式SVG，而是我要下载的附加PNG，但由于某种原因，它不起作用。

Answer 1

稍微修改一下功能：

struct s1

修改onclick处理程序：

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();
}

Answer 2

download属性在<img>标签上不起作用，您最好将图像包装在<a>标签中，然后向其添加download属性。在您的JavaScript中，您将.href添加到img标签中，这又不会执行任何操作。

Answer 3

我将使用生成的链接打开新窗口。因此代码如下所示：

PHP Fatal error:  Uncaught Error: Using $this when not in object context in /var/www/myPro/web/wp-content/plugins/taxonomy-terms-order/taxonomy-terms-order.php:134\nStack trace:\n#0 /var/www/myPro/web/wp-settings.php(273): include_once()\n#1 /var/www/myPro/web/wp-config.php(88): require_once('/var/www/myP...')\n#2 /var/www/myPro/web/wp-load.php(39): require_once('/var/www/myP...')\n#3 /var/www/myPro/web/wp-blog-header.php(13): require_once('/var/www/myP...')\n#4 /var/www/myPro/index.php(17): require('/var/www/myP...')\n#5 {main}\n  thrown in /var/www/myPro/web/wp-content/plugins/taxonomy-terms-order/taxonomy-terms-order.php on line 134

Answer 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

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

4 个答案: