CODEWITHSUNDEEP
javascriptjqueryimageblob
Karthik
Karthik

Reputation: 5759

How to Conver Blob to Image (JPG Format)

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

Upvotes: 0

Views: 1247

Answers (2)

sneep
sneep

Reputation: 1918

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

Upvotes: 2

gawicks
gawicks

Reputation: 1964

Try URL.createObjectURL

creimag.src = URL.createObjectURL(blob);

Upvotes: 0

Related Questions