CODEWITHSUNDEEP
javascriptimagesave
Ming Jin
Ming Jin

Reputation: 331

How to store base64 as an image in file system in Javascript

As above, how do I store in the file system?

I have tried these solutions, but I have still not got it right... https://gist.github.com/madhums/e749dca107e26d72b64d#file-base64-image-upload-js-L7 https://www.google.com.sg/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwiC-_K2yIPOAhVJRY8KHUq5D4oQFggcMAA&url=http%3A%2F%2Fstackoverflow.com%2Fquestions%2F17397319%2Fsave-canvas-as-jpg-to-desktop&usg=AFQjCNGADOLxAdsduTuK6d-ZcVzZRgGwWg&sig2=UPC0l9bSsPGASnCrM94unA

All I need to save looks something like this.

Object {imageFormat: "image/jpeg", imageB64: "/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAw…J3kdq5LxJM7X8ik5CyMB+dFFOPxGNT4DNJOetFFFbnCf/2Q=="}imageB64: "/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQE...+dFFOPxGNT4DNJOetFFFbnCf/2Q=="imageFormat: "image/jpeg"__proto__: Object__defineGetter__: __defineGetter__()__defineSetter__: __defineSetter__()__lookupGetter__: __lookupGetter__()__lookupSetter__: __lookupSetter__()constructor: Object()hasOwnProperty: hasOwnProperty()isPrototypeOf: isPrototypeOf()propertyIsEnumerable: propertyIsEnumerable()toLocaleString: toLocaleString()toString: toString()valueOf: valueOf()get __proto__: __proto__()set __proto__: __proto__()

Copied the whole object there..

Just picking up Javascript so please be as detailed as possible.

Upvotes: 1

Views: 1960

Answers (2)

Jonas Wilms
Jonas Wilms

Reputation: 138267

You can simply open the base64 in a new tab using javascript:

window.location="data:image/jpeg;base64,ehfnshxfbsnxj";

To let the browser download it automatically use this snippet found on SO:

var link = document.createElement('a');  
link.href = 'data:image/jpeg;base64,sduebdueb'; link.download = 'coolimage.jpg';
document.body.appendChild(link);
link.click();

Upvotes: 2

Ming Jin
Ming Jin

Reputation: 331


    var link = document.createElement('a');  
    link.href = img; 
    link.download = 'filename.jpeg';
    document.body.appendChild(link);
    link.click();

This is the solution to automatically download an image, first you create a link element, then you append the image object to href attribute and append the filename to download attribute and it should work.

Upvotes: 1

Related Questions