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 method to convert base64 file to image

var imageBase64 = "image base64 data";
var blob = new Blob([imageBase64], {type: 'image/png'});

From this blob, you can generate file object.

var file = new File([blob], 'imageFileName.png');

Answer 1

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'"
          });

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.