How download base64 data as image? - javascript

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/

Related

JavaScript changing default file name?

How would I go about changing the name of a clip that is going to be downloaded by the client on a website? Each video clip currently downloaded is a default name how do I go about customising it?
Yes, you can change file name as per your own logic. and will be download in client browser as per following logic :
var blob = b64toBlob(b64Data, contentType, false);
var blobUrl = URL.createObjectURL(blob);
var a = document.createElement("a");
document.body.appendChild(a);
a.style.display = 'none'
a.href = blobUrl;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(blobUrl);
FileName can be set as per your own logic and append file extension
b64Data = your file's binary data, contentType = content type of your file.
for example for image it will be "data:image/png;base64,"

Electron - How to save base64 dataUrl to file

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??

How to display a JPG image from a Node.js buffer (UInt8Array)

I have a custom Node.JS addon that transfers a jpg capture to my application which is working great - if I write the buffer contents to disk, it's a proper jpg image, as expected.
var wstream = fs.createWriteStream(filename);
wstream.write(getImageResult.imagebuffer);
wstream.end();
I'm struggling to display that image as an img.src rather than saving it to disk, something like
var image = document.createElement('img');
var b64encoded = btoa(String.fromCharCode.apply(null, getImageResult.imagebuffer));
image.src = 'data:image/jpeg;base64,' + b64encoded;
The data in b64encoded after the conversion IS correct, as I tried it on http://codebeautify.org/base64-to-image-converter and the correct image does show up. I must be missing something stupid. Any help would be amazing!
Thanks for the help!
Is that what you want?
// Buffer for the jpg data
var buf = getImageResult.imagebuffer;
// Create an HTML img tag
var imageElem = document.createElement('img');
// Just use the toString() method from your buffer instance
// to get date as base64 type
imageElem.src = 'data:image/jpeg;base64,' + buf.toString('base64');
facepalm...There was an extra leading space in the text...
var getImageResult = addon.getlatestimage();
var b64encoded = btoa(String.fromCharCode.apply(null, getImageResult.imagebuffer));
var datajpg = "data:image/jpg;base64," + b64encoded;
document.getElementById("myimage").src = datajpg;
Works perfectly.
You need to add img to the DOM.
Also if you are generating the buffer in the main process you need to pass it on the the render process of electron.

Highcharts: how to specify file name in window.location.href exporting image to local disk

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

Format of image downloaded in client-side

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.

Categories

Resources