代码之家 › 专栏 › 技术社区 › Mina

使用javascript强制从SRC下载图像

image html jquery javascript

Mina · 技术社区 · 6 年前

我有一个 image 用包含 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>

4 回复 | 直到 6 年前

Nimeshka Srimal 6 年前

您的代码中有一些问题。

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

希望能有所帮助:)有什么疑问,请随时咨询!

Apple Orange 6 年前

尝试以下脚本: 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')

});

user2693454 6 年前

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

Rohit.007 6 年前

您在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>