7

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');
1
  • Can u accept my answer
    – byteC0de
    Commented May 27, 2019 at 12:58

3 Answers 3

20

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'"
          });
2
  • 3
    I was stuck with this for at least a day and your code worked perfectly, this should be the accepted answer. Commented Oct 18, 2016 at 5:16
  • 2
    Thanks bro, I was stuck for 3 days. You saved my time. Commented Mar 11, 2019 at 9:57
1

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.

2
  • 1
    i did it in similar manner but getting corrupted image, not read and open Commented Nov 27, 2015 at 7:24
  • where does decodeBase64 come from?
    – busuu
    Commented Feb 16 at 18:37
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.