使用 Javascript 强制从 src 下载图像答案

【问题标题】：Force download an image from src using Javascript使用 Javascript 强制从 src 下载图像
【发布时间】：2018-07-29 00:57:50
【问题描述】：

我有一个 image 标记，其父 div 包含 image_wrap 类。现在我想使用 javascript 下载这张图片。我有一些解决方案来下载这张图片，但这段代码对我不起作用。谁能帮帮我？

这是我的代码：

var img_wrap = $('.image_wrap'),
    src = img_wrap.find('img').attr('src'),
    anchor = '<a href="' + src + '" download></a>',
    downloadable_tag = img_wrap.append(anchor);
    
downloadable_tag.click()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="image_wrap">
    <img height="100px" width="200px" src="https://s3.envato.com/files/248564292/01_eduma.__large_preview.__large_preview.jpg" />
</div>

【问题讨论】：

通过 JavaScript 下载是什么意思？将其作为可下载文件提供给用户？

标签： javascript jquery html image

【解决方案1】：

您的代码中存在一些问题。

首先，您将错误的元素附加到 img_wrap 元素。您应该附加 anchor 元素而不是 downloadable_tag。

那么，.click() 应该用于 dom 对象，而不是 Jquery 对象。所以我认为你也应该修复这条线。

最后，download 属性将只显示同一域中的文件的下载窗口。出于安全目的，它不适用于跨源请求。

因此，通过所有提到的修复，您的代码应该是这样的：

<div class="image_wrap">
    <img height="100px" width="200px" src="01_eduma.__large_preview.__large_preview.jpg" />
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

    var img_wrap = $('.image_wrap'),
        src = img_wrap.find('img').attr('src'),
        anchor = $('<a href="' + src + '" download>hello</a>'),
        downloadable_tag = img_wrap.append(anchor);

    anchor[0].click()

请注意，我为图像使用了本地路径。这是一个 plunker 演示。

http://plnkr.co/edit/eK1yJTYPUzF5p4DVTRem?p=preview

希望对您有所帮助 :) 如果您有任何疑问，请随时询问！

【讨论】：

【解决方案2】：

尝试以下脚本： http://jsfiddle.net/h4JXs/8928/

  $(document).ready(function () {

var img_wrap = $('.image_wrap'),
src = img_wrap.find('img').attr('src'),
anchor = '<a href="' + src + '" download>hello</a>',
downloadable_tag = img_wrap.append(anchor); 
downloadable_tag.trigger('click')

});

【讨论】：

【解决方案3】：

您似乎想下载图像而不是浏览它。 download 属性仅适用于同源 URL。在此处查看文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

【讨论】：

【解决方案4】：

您在 append 语句中分配了相同的变量

downloadable_tag = img_wrap.append(downloadable_tag);

用下面的改变它。

downloadable_tag = img_wrap.append(anchor);

var img_wrap = $('.image_wrap'),
    src = img_wrap.find('img').attr('src'),
    anchor = '<a href="' + src + '" download>hello</a>',
    downloadable_tag = img_wrap.append(anchor);
    
downloadable_tag.click()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="image_wrap">
    <img height="100px" width="200px" src="https://s3.envato.com/files/248564292/01_eduma.__large_preview.__large_preview.jpg" />
</div>

【讨论】：