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);?
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);?
4 Answers
Reset to default 3See 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 plete the download procedure!
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./imageurl.png" download="ImageNameHere">click here</a>
You can get a list of supported browsers for this tag here: http://caniuse./#feat=download
Read this article http://pixelsmander./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
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./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 pleted loading:
window.onload = function() {
$.post("http://www.example./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./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.";
}