时间戳

首页 > 解决方案 > 使用 Javascript 强制从 src 下载图像

javascript - 使用 Javascript 强制从 src 下载图像

问题描述

我有一个image包含image_wrap类的父 div 的标签。现在我想使用 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>

标签： javascriptjqueryhtmlimage

解决方案

您的代码中有一些问题。

首先，您将错误的元素附加到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

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

推荐阅读