I have a requirement where I am cropping the image using ng2-image cropper. But the output is of base64, I want to convert it to image source as I have to send it to some server. I have searched but didn't found anything patible with angular 4 .

I have a requirement where I am cropping the image using ng2-image cropper. But the output is of base64, I want to convert it to image source as I have to send it to some server. I have searched but didn't found anything patible with angular 4 .

• javascript
• angular

• Where exactly does Angular get in the way here? If you have your decoded Base64 (using whatever library) you can send it off to the server, no? – Thilo Commented Nov 28, 2017 at 11:26
• their is a requirement that i need to send it in image format only on the server – Ayushi Tomar Commented Nov 28, 2017 at 11:40
• To de- or encode a base64 you can use the corresponding function from javascript. – Oliver Commented Nov 28, 2017 at 12:54
• it is not working, getting error in that too – Ayushi Tomar Commented Nov 29, 2017 at 5:17
• 1 Can't understand negative votes here. Are you so in need of "deep troll" or "exclusive hater" badge from SO? – Josep Alacid Commented Jan 24, 2018 at 19:16

2 Answers 2

it can be done by using conversion to Blob

dataURItoBlob(dataURI) {
    var binary = atob(dataURI.split(',')[1]);
    var array = [];
  for (var i = 0; i < binary.length; i++) {
     array.push(binary.charCodeAt(i));
  }
 return new Blob([new Uint8Array(array)], {
    type: 'image/jpg'
});
}

    enter code here

 var myFile:Blob=this.dataURItoBlob(myDataUri);

Please try this another simple way to convert base64 to blob

   fetch(base64)
    .then(res => {
      return res.blob();
    })
    .then(blob => {
      console.log(blob);
    });