I am downloading images in html page using javascript. This works in latest firefox and chrome browsers.
What I would like to know is the format in which the image will be saved? Though, we can give formats in file name like image.png, will it be saved in png format?
The source of the image is SVG graphics, so this image is completely generated and downloaded in client-side. I am using the following code for downloading:
var canvas = document.getElementById('canvas2');
svg = $("#container").html();
canvg(canvas, svg);
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
var downloadLink = document.createElement("a");
downloadLink.href = image;
downloadLink.download = "imge.png";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
Here image is the javascript variable in which the image is stored.
It will be saved in the format of the original image. Browsers do not do image conversion.
Related
I use vue-signature Library and I Don't know how to download base64 data generated as image,
Here is Link of library : https://www.npmjs.com/package/vue-signature
I've already read the documentation and see That "Save()" Methods Save image as PNG/JPG… but it give me base64 data,
thank you for your collaboration, I use vue js
This is not the most optimized solution, But it works.
var a = document.createElement("a"); //Create <a>
a.href = "data:image/png;base64," + ImageBase64; //Image Base64 Goes here
a.download = "Image.png"; //File name Here
a.click(); //Downloaded file
In your case you can try this
var canvas = document.querySelector("canvas");
var signaturePad = new SignaturePad(canvas);
// Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible parameters)
signaturePad.toDataURL("image/jpeg"); // save image as JPEG
source : https://vuejsexamples.com/vue-signature-pad-component/
When I download image versions of my canvas drawings I am unable to view or access them. My device keeps saying "doesn't support this file format" even though I have the image file labelled as "png" (lowercase too). The file downloads perfectly fine but that's about it. Any idea of what Im doing wrong?, below is the snippet of code. A link to my website too which is responsive [https://webdevcit.com/2018/Sem2/R00125891/Pages/structure/srctr1.html]
Any help would be very much appreciated
Download
function createDownload() {
const downloadURL = document.getElementById('c').toDataURL();
document.getElementById('downloadLink').href = downloadURL;
}
Open you downloaded file with a text editor and you will see it is a HTML Text file and not a PNG.
You are never calling the createDownload() function
Try this!!
let url = canvas.toDataURL();
let a = document.createElement("a");
a.href = url;
a.download = "image.png";
a.click();
I found that I could download the contents of a <canvas> element to file, by using the following script:
var download = function(){
var link = document.createElement("a");
link.download = 'filename.png';
link.href = cvs2.toDataURL();
link.click();
}
When using this method on Chrome (android) however, it seems to have downloaded the file into a private chrome folder on my device. What I need is for the canvas contents to be downloaded as an image file into the normal download folder(ie /sdcard/Downloads).
How can I achieve this?
Consider using the toBlob() method on the canvas element to first acquire a file/blob of the canvas contents. Then, use the createObjectURL() and revokeObjectURL() methods of the URL API as shown, to get and assign the corresponding url to your temporary download link:
var download = function(filename, mimeType) {
/* Use toBlob to get a file from the canvas element */
canvas.toBlob(function(blob) {
/* Get url for this file blob */
var url = URL.createObjectURL(blob);
/* Create temporary link and start download */
var link = document.createElement("a");
link.download = filename;
link.href = url;
link.click();
/* Clean up */
URL.revokeObjectURL(url);
}, mimeType);
}
/* Usage example */
download('my-filename.png', 'image/png')
Hope this helps!
For chrome you can use donwloads.download()
I'm working with an existing Electron project (convert web app to desktop app), which has a task that is to export content on screen to pdf/png/jpg.
Here is the situation:
The desktop app is purely client-side code, it doesn't connect to any API or server (just in case you suggest a solution using Nodejs server-side code)
I got the dataUrl from canvas object already (it's a base64 string of the file)
How can I save that dataUrl into a file (pdf/png/jpg)?
Here are some ways that I tried:
The good old window.location = dataUrl (nothing happens)
Create a form inside the div, action = dataUrl, then submit the form
Both ways are not working!
Thank you very much
For the download to occur the MIME type of the data URI needs to be changed to "application/octet-stream"
var dataURL = "data:text/plain,123";
var form = document.createElement("form");
form.action = dataURL.replace(/:[\w-/]+(?=,)/, ":application/octet-stream");
form.method = "GET";
document.body.appendChild(form);
form.submit();
Using <a> element with download attribute
var dataURL = "data:text/plain,123";
var a = document.createElement("a");
a.download = "file";
a.href = dataURL;
document.body.appendChild(a);
a.click();
See also How to download a file without using <a> element with download attribute or a server??
This jsfiddle shows how to export a Highcharts chart to a png file, however doesn't show how to specify the file name.
Something like
var image = canvas.toDataURL("image/png")
.replace("image/png", "image/octet-stream");
image.filename = "file.png"; <=== this doesn't work
// Save locally
window.location.href = image;
Any ideas?
var image = Canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href=image; // it will save locally