Save Image file from Image URL javascript html

Question

I'm a beginner with JS and HTML. I'm working on a certain project to generate pie charts, I am using google charts with an HTML API.

I managed to produce the chart and get the image URL. That when I call this line: window.open(URL); a new window is opened containing the picture. My question is, is there a similar type method that takes the URL and downloads the image in the project folder? something like download(URL,'PNG'); or even download(URL);?

score 3 · Accepted Answer · edited May 23 '17 at 12:16

3

See this question if you're trying to allow the end user to download that image: Download image with JavaScript

If you're trying to download the image for use in the page, why not use an tag and reference it remotely?

    <img src="[url retrieved from the api]">

Keep in mind that Javascript is run on the client side, so any download functions would download to the end user, not the project folder.

EDIT: Made a fiddle with the code used and made an implementation.

The fiddle.

I pulled from the Google Chart docs "Printing PNGs". Here's how they did it:

//Your data and options initialization up here 
....

//Event listener
google.visualization.events.addListener(chart, 'ready', function () {
    chart_div.innerHTML = '<img src="' + chart.getImageURI() + '" download="chart.png">';
    console.log(chart_div.innerHTML);
}); 

//Actually draw the chart
chart.draw(data, options);

Just use the other SO link to complete the download procedure!

edited May 23 '17 at 12:16

Community

1
1

answered Apr 20 '16 at 01:37

Jack Michaud

76
6

I guess there's no problem I want the end user to download it, I am using the HTML only to generate the chart. Well for better understanding here's my html code. https://drive.google.com/file/d/0BzIX54uDTFnXNG96WjJNRU5yNWs/view?usp=sharing I'm also beginner with Markdown so Idk how to embed the image url :D – Michel Mina Apr 20 '16 at 01:45
Check this out, from the Google Charts docs: [Printing PNG Charts](https://developers.google.com/chart/interactive/docs/printing) – Jack Michaud Apr 20 '16 at 01:55
Sorry for being late :/ – Michel Mina Apr 23 '16 at 20:23

score 1 · Answer 2 · answered Apr 20 '16 at 01:34

As far as I'm aware there is no way of doing this in Javascript (I could be totally wrong) so you could do it in HTML5 instead.

HTML5:

<a href="website.com/imageurl.png" download="ImageNameHere">click here</a>

You can get a list of supported browsers for this tag here: http://caniuse.com/#feat=download

score 1 · Answer 3 · answered Apr 20 '16 at 01:35

Read this article http://pixelscommander.com/en/javascript/javascript-file-download-ignore-content-type/ (you can see working here http://codepen.io/jelmerdemaat/pen/brjKG?editors=0010)

You can call downloadFile(URL); the user can choose where him will save the image

score 0 · Answer 4 · answered Nov 02 '18 at 17:52

The answer to question "is there a similar type method that takes the URL and downloads the image in the project folder?" is:

No.

The reason is that any web page containing Javascript is not executed on the server where it is stored: instead, a copy is sent to the user browser, which runs it on user PC; this copy is not aware of the project folder on the server. The only way to save on the server an image created locally on user PC is to upload the image to the server, where for example a .PHP script waits for the data; such PHP script runs on the server, hence it can store in the project folder the received image.

This javascript snippet sends image data to remote PHP file:

$.post("http://www.example.com/image-saver.php",
{
  imgdata: imgData,
  pass: "mypass"
}

But at the moment the script is called, the image must be already present in the page, which takes a little to be loaded, hence above script must be enclosed inside a function which is activated only after page has completed loading:

window.onload = function() {
        $.post("http://www.example.com/image-saver.php",
        {
          imgdata: imgData,
          pass: "mypass"
        }
};

The "imgData" can be for example created by converting to URL the data contained in the canvas which holds the image:

imgData = canvas.toDataURL('image/png');

Hence the full source in the specific case of "php" and "toDataURL" would be:

<script src="jquery.js"></script>
<script>
        window.onload = function() {
        imgData = canvas.toDataURL('image/png');
        $.post("http://www.example.com/image-saver.php",
        {
          imgdata: imgData,
          pass: "mypass"
        }
};
</script>

These data will be read by image-saver.php script on the server:

$data = $_POST['imgdata'];
$pass = $_POST['pass'];

if ($pass == "mypass") {
    $img = imagecreatefromstring(base64_decode(substr($data,strpos($data,',')+1)));
    $result = imagepng($img,"image.png");
    die($img);
    echo "Result: " . $result . "<br>";
} else {
    echo "Nice attempt.";
}

Save Image file from Image URL javascript html

4 Answers4

Linked