Convert base64 data url to image file in angularjs

Question

I have base64 data URL in my angularJs controller, and I need an image file from that, so that I could send it to server as multi-part data through ajax?

I'm looking for something like file writer in angularjs. Can anyone help me please?

dhavalcengg · Accepted Answer · 2015-08-10 06:31:05Z

22

you can generate blob from base64 data.

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

You can use this file object and post it to server using multipart data.

edited Aug 10, 2015 at 6:31

answered Aug 7, 2015 at 13:15

dhavalcengg

4,7131 gold badge20 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

dhavalcengg Over a year ago

Any time :) glad i helped :)

Aarohi Kulkarni Over a year ago

Althogh when I save the image, it says not a png file and won't let me view it. Can you tell why?

Aarohi Kulkarni Over a year ago

The blob file is going with content type as application/octet-stream, instead of image/png, to the server(python django), which is why I'm guessing it's not able to save it as image file. I'm not sure how to make a plunkr of this.

dhavalcengg Over a year ago

you can pass blob type in blob constructor. check my updated answer

Collectives™ on Stack Overflow

Convert base64 data url to image file in angularjs

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related