角度裁剪的图像文件大小变大

Question

I'm using this plugin angular-image-cropper to crop my image and ng-file-upload to upload my image.

The problem is let say my image dimension is 1955px * 1300px with size around 194kb.

After I crop to 800px * 450px the size become around 550kb.

is this correct? because it become almost 4 times bigger from it's original size

my html code:

<div class="form-group">
     <label class="control-label">Cover</label>
     <input type="file" ngf-select="uploadFiles($files,$invalidFiles)" name="cover" id="cover" ngf-pattern="image/*" accept="image/*"
       ng-model="upload.coverSource" ngf-max-size="512KB" ngf-min-width="800" img-cropper-fileread image="upload.coverSource"
       disable-invalid-styling="true" disable-valid-styling="true">

      <canvas ng-show="upload.coverSource" width="500" height="281" id="canvas" image-cropper image="upload.coverSource"
        cropped-image="category.coverCrop" crop-width="800" crop-height="450" keep-aspect="true" crop-area-bounds="bounds">
      </canvas>
</div>

Inside my angular I just tried to console.log both of them:

console.log($scope.upload.coverSource);

// and i need to convert it to blob first to get the data.
// category.coverCrop value is in data:base64

var cover = Upload.dataUrltoBlob(category.coverCrop);
console.log(cover);

Here is the result screenshot:

Any solution to make the size same or lesser?

Answer 1

In most of the croppers that I've tested, the resulting image gets translated into a raw format making it bigger, in the case of your info, look that the image is in its raw base64 format, also here is an example of a pretty advanced editor that has a similar result: https://www.photoeditorsdk.com/ the thing is that compresion or any further processing is a different task than cropping, and is not usually handled by this libs; so how you solve it? In our case, we integrate with cloudinary.com and use their transformation API to make sure all our images has the right size and quality.