Question

我有一个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>

Answer 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()

请注意，我已为图像使用本地路径。这是一个小样的演示。

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

希望它会有所帮助:)随时询问您是否有任何疑问！

Answer 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')

});

Answer 3

似乎您要下载图像而不是浏览图像。属性download仅适用于相同的原始URL。在此处查看文档：{{3}}

Answer 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>

使用Javascript强制从src下载图像

4 个答案: