Convert base64 image data to image file in angularjs

Question

getting corrupted file while converting base64 file to image in angularjs can anyone suggest me how to convert base64 file to image in angularjs

I am using this meth

Answer 1

Needed this in Angular 8, so i modified the answer a bit to typescript and directly to file, since you have the mimetype from the datastring, you might as well use that to create the file.

dataURItoBlob(dataURI : any, fileName : string) : File{

    // convert base64/URLEncoded data component to a file
    var byteString;
   if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
   else
       byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
       ia[i] = byteString.charCodeAt(i);
    }

    return new File([ia],fileName, {type:mimeString});
}

all credits go to @byteC0de with the answer https://stackoverflow.com/a/35401651/1805974

Only reason I would post the answer here is due to google keeps sending me to this page.

Answer 2

Your code looks ok except for a point:

The data you are giving to the Blob object is not blob data, it's a text one this is base64 encoded. You should decode data before insert.

Once I don't know which API you would like, I will use a pseudofunction called decodeBase64 which we will understand do the inverse of the Base64 encode (there are many implementations for this function in web).

Your code should look like this:

// base64 already encoded data
var imageBase64 = "image base64 data";

//this is the point you should use
decodedImage = decodeBase64(imageBase64)

//now, use the decodedData instead of the base64 one
var blob = new Blob([decodedImage], {type: 'image/png'});

///now it should work properly
var file = new File([blob], 'imageFileName.png');

Anyway, I can't see the need to use AngularJS there once you are not already using.

Answer 3

First, you convert dataURL to Blob do this

var blob = dataURItoBlob(imageBase64);

function dataURItoBlob(dataURI) {

            // convert base64/URLEncoded data component to raw binary data held in a string
            var byteString;
            if (dataURI.split(',')[0].indexOf('base64') >= 0)
                byteString = atob(dataURI.split(',')[1]);
            else
                byteString = unescape(dataURI.split(',')[1]);

            // separate out the mime component
            var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

            // write the bytes of the string to a typed array
            var ia = new Uint8Array(byteString.length);
            for (var i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i);
            }

            return new Blob([ia], {type:mimeString});
        }

then

var file = new File([blob], "fileName.jpeg", {
            type: "'image/jpeg'"
          });