Develop Reference

How to download image from an image URL?

I have trouble downloading an image when clicking on an image link.
I'm prepending download?image= before the image url, it is giving the save option but fails to get downloaded.
Here is my code:
Download
Note:Without using download?image= it is opening image in new tab.

My problem has been solved.I used File-saver.js library to download images.
Here is the code :
<a href='javascript:void(0)' onClick={()=>{this.download(data[0].compress_path)}} >Download</a>
And below is the download function which i have used:
download=(save)=>{
var FileSaver = require('file-saver');
var fileName=save.substring(save.lastIndexOf('/') + 1)
FileSaver.saveAs(save, fileName);
}
Note:Use
import { saveAs } from 'file-saver'to use saveAs.

html2canvas saving canvas images with extension

I have a web page with button onclick on that button a screenshot of this page should be taken and downloaded with (.jpg) extension.
to do that I use the following code:
$("#Finish").on('click', function () {
// take a screenshot and save it.
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
DownloadImage();
}
});
});
function DownloadImage() {
var imageData = getCanvas.toDataURL("image/png");
var newData = imageData.replace(/^data:image\/png/, "data:application/octet-stream");
window.open(newData);
}
when i click the button:
As you see I have image with "download" Name without any extension.
I need to download the image with specific name and extension for example "myImage.jpg"

If you can change the button into a <a> tag, you should be able to use the download attribute.
$('#image-link').attr('href', 'data:image/png;base64,<data>").attr('download', 'filename.png');
Haven't played around with it too much myself but it is said to work in Firefox, Chrome and Edge: https://caniuse.com/#feat=download

Electron issue with download attribute

Following my previous question here,
I have a desktop application using Electron platform and Javascript where I am converting an HTML5 canvas to JPEG using:
<a id="download" download="Path.jpg">Download JPG</a>
then,
function download(){
var dt = canvas.toDataURL('image/jpeg');
this.href=dt;
}
document.getElementById('download').addEventListener('click', download, false);
This refreshes my whole application. How can I change this behavior, such that the page does not refresh when the download attribute is clicked?

I can think of this two snippets, one using blob and one using the download element. external-library: FileSave.js
// this one use FileSaver.js library
canvas.toBlob(function(blob) {
saveAs(blob, "pretty image.png");
});
// or this way using download element.
// here you can encode your image-data and then send it.
var download = document.getElementById('download');
download.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(imageData));
download.setAttribute('download', 'file.jpg');
also I found this one just now, electron specific solution :
Saving files locally with electron

Edit your anchor tag a bit
<a id="download" download="Path.jpg" target="_blank" onClick="download();">Download JPG</a>
And then your download function
function download(event){
event.currentTarget.href = canvas.toDataURL('image/jpeg');
}
This might help

Broken image on mouseup when MVC ActionResult called for file download

I originally created a button that changed the src based on mouseup and mousedown to give it the appearance of being depressed when clicked as well as playing a click sound. This worked out fine until I tried to force PDF download through MVC action. I've tried to skin this cat a few different ways but I've settled on using the mouseup function to set the window location to my pdf download action passing in the needed file download path information. Now when I click the button it depresses (correctly executing mousedown), then on mouseup it correctly plays the click sound and also downloads the pdf file as I want, but makes the button image appear to be broken.
When I first load the page and the button hasn't been clicked yet the image looks like it's supposed to. Then after running mouseup it's broken (using Chrome or disappears or appears garbled in IE and Safari) but when I inspect the source the src attribute looks to be identical so I'm not sure why it's returning a broken image if the src is the same as it was before.
Code-
View jquery:
var audio = document.getElementsByTagName("audio")[0];
$('#MAAX-DGB-Button').mouseup(function () {
$(this).attr('src', '../../Content/Images/AdLandingViews/MAAX-DGB.png');
audio.play();
var pdfDownload = '/Locator/ForcePDFDownload?PDFURL=<file location info>';
window.location = pdfDownload;
});
$('#MAAX-DGB-Button').mousedown(function () {
$(this).attr('src', '../../Content/Images/AdLandingViews/MAAX-DGB_press.png');
});
View HTML:
<img src="../../Content/Images/AdLandingViews/MAAX-DGB.png" alt="Download MAAX Collection Brochure" id="MAAX-DGB-Button" />
ForcePDFDownload MVC Action:
public ActionResult ForcePDFDownload(string PDFURL)
{
string path = #"\\<server location>\" + PDFURL;
string filename = Path.GetFileName(PDFURL);
Response.AppendHeader("Content-Disposition", "attachment; filename=" + filename);
return File(path, "application/pdf");
}
You can test the code here:
https://maaxspasportal.com/Locator/AdLandingLocate/MAAXCollection but you'll have to fill in some dummy data and submit the form to get to the results page where this issue is occurring on the "Download Green Brochure" button.
Tested Browsers:
Chrome Version 28.0.1500.95 - Image appears broken.
IE 10 - Image disappears or looks garbled.
Safari 6.0.5 - Image disappears.
FireFox 22.0 - Works!
Thanks for any help getting this to work correctly.

Well I never determined the exact root cause for the issues, however I did find a way to fix the problem.
On mouseup I applied a setTimeout delay on the forced pdf download function:
var audio = document.getElementsByTagName("audio")[0];
$('#MAAX-DGB-Button').mouseup(function () {
$(this).attr('src', '../../Content/Images/AdLandingViews/MAAX-DGB.png');
audio.play();
var pdfDownload = '/Locator/ForcePDFDownload?PDFURL=assets.maaxspas.com/docsources/1/138ee0a8-e0f0-47d5-9447-fca6f538d74f.pdf';
setTimeout(function() { window.location = pdfDownload }, 1000);
});
$('#MAAX-DGB-Button').mousedown(function () {
$(this).attr('src', '../../Content/Images/AdLandingViews/MAAX-DGB_press.png');
});
Would still be interested to know what was going wrong but at least it's functioning the way I want now.
Thanks.

Accept drag & drop of image from another browser window

In Javascript, I know how to set up a drag & drop target that accepts file uploads from the user's computer. How can I set up a drop target that accepts images that are dragged from another website? All I need to know is the URL of the image that they've dragged.
I know this is possible, since Google Docs accepts image drops from other websites. Any idea how they're doing it?

UPDATE:
It looks like there are differences between Chrome on Windows and MacOS. On Windows dataTransfer.getData('Text'); works but not on MacOS. dataTransfer.getData('URL'); should work on both.
OLD answer:
You could define a drop zone:
<div id="dropbox">DropZone => you could drop any image from any page here</div>
and then handle the dragenter, dragexit, dragover and drop events:
var dropbox = document.getElementById('dropbox');
dropbox.addEventListener('dragenter', noopHandler, false);
dropbox.addEventListener('dragexit', noopHandler, false);
dropbox.addEventListener('dragover', noopHandler, false);
dropbox.addEventListener('drop', drop, false);
function noopHandler(evt) {
evt.stopPropagation();
evt.preventDefault();
}
function drop(evt) {
evt.stopPropagation();
evt.preventDefault();
var imageUrl = evt.dataTransfer.getData('Text');
alert(imageUrl);
}
​
It is inside the drop event handler that we are reading the image data from the dataTransfer object as Text. If we dropped an image from some other webpage this text will represent the url of the image.
And here's a live demo.

function drop(evt) {
evt.stopPropagation();
evt.preventDefault();
var imageUrl = evt.dataTransfer.getData('URL'); // instead of 'Text'
alert(imageUrl);
}
Seems to work in Firefox, Safari, and Chrome on Mac. Also works in Firefox, IE, and Chrome in Windows.
Updated fiddle

Although you are able to accept the drag and drop of an image from another website, you are unable to do any processing of it (e.g. converting it to a base64 string using the canvas) (as of 21st August 2014) because of various cross-origin policy issues.
var dt = event.dataTransfer;
var url = dt.getData('url');
if (!url) {
url = dt.getData('text/plain');
if (!url) {
url = dt.getData('text/uri-list');
if (!url) {
// We have tried all that we can to get this url but we can't. Abort mission
return;
}
}
}
Even Google can't get around this - If you use gmail, you can drag and drop an image from another location in to the email body, but all this does is create an <img/> element with its src set to url (from the code above).
However, I've created a plugin that allows you to fake it cross-origin drag and drop. It requires a PHP backend.
Read the article I wrote on it here https://coderwall.com/p/doco6w/html5-cross-origin-drag-and-drop

Here's my solution to the problem: Dropzone js - Drag n Drop file from same page
Please do keep in mind that ability to drag an image from another domain depends on their CORS setup.

Some browsers use text/plain some use text/html as well
This code should pull any text or image source url on the latest Chrome, FF on Mac and PC.
Safari doesn't seem to give the URL so if someone knows how to get it let me know.
I'm still working on IE.
function getAnyText(theevent) {
//see if we have anything in the text or img src tag
var insert_text;
var location = theevent.target;
var etext;
var ehtml;
try {
etext = theevent.dataTransfer.getData("text/plain");
} catch (_error) {}
try {
ehtml = theevent.dataTransfer.getData("text/html");
} catch (_error) {}
if (etext) {
insert_text = etext;
} else if (ehtml) {
object = $('<div/>').html(ehtml).contents();
if (object) {
insert_text = object.closest('img').prop('src');
}
}
if (insert_text) {
insertText(insert_text,location);
}
}

As the other answers correctly state: It normally depends on the CORS-Settings of the server if drag & drop from another browser window is possible (Access-Control-Allow-Origin has to be set).
However I've just found out by chance that it's possible to drap & drop any images from a Firefox (current version 68.0.1) to a Chrome window (current version 76.0.3809) and process it in Javascript, regardless if CORS headers are set or not.
See working example (based on jsfiddle of Darin Dimitrov) which accepts and directly shows images from:
drag and drop from local computer (e.g. from file explorer)
drag and drop from other website, if CORS headers are set, e.g. an image from https://imgur.com/
drag and drop any images from Firefox window to Chrome window:
open jsfiddle demo in Chrome
open e.g. google image search in Firefox and search for any image
click on the image for bigger preview
drag & drop the preview image to the jsfiddle demo in Chrome
However this seems to be kind of a bug of Firefox and therefore I would not rely on this behaviour in an productive application.