How to Conver Blob to Image (JPG Format)

Question

i using croper.js for to crop and store a image. following function i use croped blob to convert image format. that function not working properly.

   cropper.getCroppedCanvas().toBlob(function (blob) {
        var formData = new FormData();

        var creimag = document.createElement('img');
        creimag.src = 'data:image/png;base64,'+ blob;
        var processeddata=document.body.appendChild(creimag); 

        formData.append('file', processeddata);
    });

Answer 1

The way you are coding this, you are appending an <img> tag where a file/ Blob is expected.

https://github.com/fengyuanchen/cropperjs#getcroppedcanvasoptions

This page has an example for this use case. You have to append blob to the form. Quote from the example code:

cropper.getCroppedCanvas().toBlob(function (blob) {
  var formData = new FormData();
  formData.append('croppedImage', blob);
  ...

Answer 2

Try URL. createObjectURL

creimag.src = URL.createObjectURL(blob);