Save Image File from Image Url JavaScript HTML

Save Image file from Image URL javascript html

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!

transform and download a image from URL using JavaScript

Try loading your image into a Canvas and doing all your image modifications on the 2d context. I made you an example here:

https://jsfiddle.net/mortac8/mhds8wn6/1/

<canvas id="mycanvas" height=100 width=100></canvas>

<script>
let download = function(){
let link = document.createElement('a');
link.download = 'anAnswer.png';
link.href = document.getElementById('mycanvas').toDataURL();
link.click();
}

let img = new Image();
img.src = "https://images.habbo.com/c_images/album1584/FAS03.png";
img.setAttribute("crossorigin", "anonymous");
img.addEventListener("load", function() {
let canvas = document.getElementById("mycanvas");
let ctx = canvas.getContext("2d");
ctx.scale(2,2);
ctx.imageSmoothingEnabled = false;
ctx.drawImage(img, 0, 0);
download();
});
</script>

HTML form upload file from url image using JavaScript

For your case, I think you must save the link to input hidden and submit to server side to get that image.
If you want to show the preview for user, just create a <img src=" http://books.google.com/books/content?id=L2byvgEACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api" /> on your form.

Put hidden input to keep the link from user:

<input type="hidden" name="image-url" value="http://books.google.com/books/content?id=L2byvgEACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api">

<img src="http://books.google.com/books/content?id=L2byvgEACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api"/>


And then, you have to take action download this image on your server side.

Save and load an image from input

I was incorrect that server side is required. There is a good tutorial on codepen for exactly this codepen found from this blog

<div id="page-wrapper">

<h1>Image File Reader</h1>
<div>
Select an image file:
<input type="file" id="fileInput">
</div>
<div id="fileDisplayArea"></div>

CSS

    html {
font-family: Helvetica, Arial, sans-serif;
font-size: 100%;
background: #333;
}

#page-wrapper {
width: 600px;
background: #FFF;
padding: 1em;
margin: 1em auto;
min-height: 300px;
border-top: 5px solid #69c773;
box-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

h1 {
margin-top: 0;
}

img {
max-width: 100%;
}

#fileDisplayArea {
margin-top: 2em;
width: 100%;
overflow-x: auto;
}

Javascript:

window.onload = function() {

var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');


fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var imageType = /image.*/;

if (file.type.match(imageType)) {
var reader = new FileReader();

reader.onload = function(e) {
fileDisplayArea.innerHTML = "";

var img = new Image();
img.src = reader.result;

fileDisplayArea.appendChild(img);
}

reader.readAsDataURL(file);
} else {
fileDisplayArea.innerHTML = "File not supported!"
}
});

}

How to change save image to file default name?

How to change the default name of save to file dialog in FF using HTML and JS?

The simple answer is that we can't.

The names are generated internally in the browser and we have no API access to this from an ordinary web page, and therefor can't change this behavior.

There are several reasons for not having direct access to the default context menu, one being security.

Extensions

One work-around though is to write a plugin/extension for the browser and provide a custom context menu item which you can then give the desired behavior.

Or use some existing ones like this or this - these are randomly selected just meant as examples. You may be able a better fit going through the add-on collections.

Download attribute and context menu

If you are controlling the page you want to save the images from, you could also provide a custom context menu which allows you to save images using the A-tag and the download attribute which allows you to set a filename.

You would need to convert the image to an Object-URL or Data-URI and set that as source for the A-tag.

Some may object to using custom context menus for various reasons, but if this is for local usage there is no good reason saying you can't, and in other cases a good UX approach can inform the user of this behavior removing any surprises.

Context menu example using CamanJS

Added a minimalist example to pop up the menu with a link and filename. The example uses CamanJS using the toBase64() method.

Since CamanJS replaced the original element it is important to attach event handlers after canvas has replaced them as otherwise the handler will die together with the original element in the sense they are no longer available.

Caman(img, function() {
var me = this;

// from inside callback as img is now a different element
img.oncontextmenu = function(e) {
e.preventDefault(); // prevent default action
lnk.download = lnk.innerHTML = "Myfile.jpg"; // set file and link name
lnk.href = me.toBase64(); // get Data-URI from CamanJS
menu.style.cssText = // show the menu
"left:" + e.clientX + "px; top:" + e.clientY + "px; display:block";
};
});

window.onclick = function() {menu.style.display="none"};
#menu {
position:fixed;
background:#444;
padding:4px 7px;
box-shadow:3px 3px 3px #000;
display:none;
}
#menu a {color:#fff;font:14px sans-serif}
<script src="http://cdnjs.cloudflare.com/ajax/libs/camanjs/4.0.0/caman.full.min.js"></script>
<img id=img src="//i.imgur.com/67E6Ujdb.jpg" crossOrigin="anonymous">
<div id="menu">
<a id="lnk"></a>
</div>


Related Topics



Leave a reply



Submit