Saving Data URI as Image?

Question

On a node server I would like to save uploaded datauri data as an image. To do this I've tried decoding the content of this png-

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAIAAAFlEcHbAAAAB3RJTUUH1gMWFjk7nUWcXQAAAAlwSFlzAABOIAAATiABFn2Z3gAAAARnQU1BAACxjwv8YQUAAAAeSURBVHjaY7h79y7DhAkTGIA04/Tp0xkYGJ49ewYAgYwLV/R7bDQAAAAASUVORK5CYII=

And saving it as a .png extension. Looks like there is more too it than that. How do I decode the datauri and save it as a file?

score 15 · Answer 1 · answered Aug 12 '16 at 16:38

I've created a library to be used with Node.js that helps with encoding and decoding of data URI schemes. I believe it can help you, check:

https://github.com/DiegoZoracKy/image-data-uri

Using this library, in your case, the code would be:

'use strict';

const ImageDataURI = require('image-data-uri');

const dataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAIAAAFlEcHbAAAAB3RJTUUH1gMWFjk7nUWcXQAAAAlwSFlzAABOIAAATiABFn2Z3gAAAARnQU1BAACxjwv8YQUAAAAeSURBVHjaY7h79y7DhAkTGIA04/Tp0xkYGJ49ewYAgYwLV/R7bDQAAAAASUVORK5CYII=';
const fileName = 'decoded-image.png';

ImageDataURI.outputFile(dataURI, filePath);

fileName != filePath ImageDataURI.outputFile(dataURI, fileName); — Abraxas, May 27 '22 at 22:14

score 3 · Answer 2 · answered Apr 13 '16 at 00:39

3

I was trying to decode the data using atob and saving this as a png file. I'm instead saving it base64 encoded but specifying the encoding in the write buffer.

fs.writeFileSync('tmp/myfile.png', new Buffer(data, 'base64'));

answered Apr 13 '16 at 00:39

micah

7,596
10
49
90

Is there an equivalent method for other image types? I tried this with a JPG & it didn't seem to work. – trysis Apr 15 '18 at 04:55

score 1 · Answer 3 · answered Apr 12 '16 at 22:30

You can convert your data uri to a blob using below code:

function dataURItoBlob(dataURI) {
    var byteStr;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteStr = atob(dataURI.split(',')[1]);
    else
        byteStr = unescape(dataURI.split(',')[1]);

    var mimeStr = dataURI.split(',')[0].split(':')[1].split(';')[0];

    var arr= new Uint8Array(byteStr.length);
    for (var i = 0; i < byteStr.length; i++) {
        arr[i] = byteStr.charCodeAt(i);
    }

    return new Blob([arr], {type:mimeStr});
}

and then you can append this blob data to from data and upload it as a file:

var blob = dataURItoBlob(dataURI);
var fd = new FormData(document.forms[0]);
fd.append("image", blob);

I feel like it would be easier to do this on the server. Would the same method be used to save this as a file? — micah, Apr 13 '16 at 00:28

Saving Data URI as Image?

3 Answers3