1

I want to download an image from an external server (that i don't own) with javascript/jquery.

With my actual script unluckely i can only open the img in the browser.

Script interested

var aa = $('<a/>', {"href": img ,"text": "Download", "download": ""}).appendTo( "#show" );

There are similar questions but not with jquery/javascript. And i not want to rename the files ^^

A simple solution is to write in the link "right click and save link as" but is not nice :D

El Diablo
  • 13
  • 8

1 Answers1

3

Note: I have taken help from this answer

I think that you want to download image on some event e.g. Click Event etc.

As per my understanding I think it should happen on clicking on image OR Download All Images with one click

You can add a class to your image elements to grap your images

<img class="downloadable" ...>

$('img.downloadable').on('click', function(){
  var $this = $(this);
  $this.wrap('<a href="' + $this.attr('src') + '" download />')
});

or if you want to download all images with on click then you can try this code

<button id="download_all_images">Download All Images</button>

$('#download_all_images').on('click', function(){
    $('img.downloadable').each(function(){
        var $this = $(this);
        $this.wrap('<a href="' + $this.attr('src') + '" download />')
    });
});

This code snippet will Force Download your Image due to HTML5 download attribute

You can check this code to verify it I am download image from external server

<button id="download_image">Download Image</button>

$('#download_image').click(); 

<a id="download_image" href="https://docs.google.com/uc?id=0B0jH18Lft7ypSmRjdWg1c082Y2M" download></a>

I hope this will help! Thanks

shery089
  • 702
  • 11
  • 19
  • No...seems that the html5 attribute "download" don't run. (i've don't tested google but the site i must download from). I can only right click and do "save link as". I've readed that in firefox and chrome, this attribute work only with the same origin files unluckely. Thanks anyway ^^ – El Diablo Dec 17 '17 at 18:07
  • https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image Please check this link this might you.Best of luck :) – shery089 Dec 17 '17 at 18:16
  • 1
    Seems not be supported by all browsers. For now i think is better the "simple but not so nice solution" i've writed in the answer. Thanks anyway ^^ – El Diablo Dec 17 '17 at 18:28