Image size (in kb) is getting increased

[angshujit]

Hello,

We tried to use Croppie in our application. We used basic settings and be able to incorporate correctly. However after cropping the image size is getting increased. Say we uploaded a image of 100kb. Now we cropped one part of it. When we ware checking the raw output we found that size of the image was around 110kb (though it was a part of the image). If we zoom in the image before cropping the size is getting increased by 4-5 times!.

Can you please let me know what we are doing wrong, and how to solve the issue.

[MentalGear]

Have a look at the "result" method.

[avi885]

I'm also facing the issue. For my case, the size is growing to almost 4-5 times. This is the result format I'm using:

$uploadCrop.croppie('result', 'blob').then(function (resp) { 
    popupResult({ 
      src: resp 
    }); 
  });

[JOGUI22]

It's happening the same to me. We want to only work with jpeg. A 10MB input image outputs a 12xMB image (with Chrome, inspecting the network, i see a 125MB Content Length).

Our croppie is the same as @avi885

$uploadCrop.croppie('result', 'blob').then(function (resp) { popupResult({ src: resp }); });

[lukas-zech-software]

I had the same problem and came to this conclusion:

The JPG I used was stored compressed with reduced file size but once you load it in the browser it gets uncompressed to be viewed. This uncompressed BLOB is what croppie deals with and its size basically the original size of the uncompressed image.

I used a image from my DSLR with an resolution of 4000*3000 pixels. The JPG size was around 7 MB but the BLOB returned from croppie was around 22MB

The easy for me was to configure the size croppie should output via the options passed to the result method:

croppie.cropper.result(
      {
        type:   'blob',
        size:   {
          width:  740,
          height: undefined,
        },
        format: 'jpeg',
        quality:0.8,
      });

This gave me the image in the desire size at around 1MB If you do not want a fixed width, have a look at the other options possible for the size option

[ericlormul]

I have the same issue. Following is my result method. I'm going to upload cropped image to sever. Currently, I'm using blob. will it decrease the size of cropped image, by using other type like canvas?

crop.croppie('result', { type: 'blob', format: 'png', circle: false, quality: 1, size: image_type == 'avatar' ? undefined : 'original' })

[ismailansari]

Same issue after 3 years and we got some satisfaction with lukas-zech-software answer, looks like repository is no longer maintained.

[Jonathan2313]

I had a similar issue. I changed my format from 'jpg' to 'jpeg' in the results call and the compression worked very well.