scottcheng / cropit

A "customizable crop and zoom" jQuery plugin.
http://scottcheng.github.io/cropit/
MIT License
875 stars 304 forks source link

Quality seem to have no effect #291

Open SDCRoman opened 6 years ago

SDCRoman commented 6 years ago

Croping images works great, but I have an issue with the quality.

For example. I need to crop a pretty big image, but the preview has to be small, so I use exportZoom. But the exported version, eventhough is a bit smaller has aweful quality. By aweful quality I mean that the size is very big. The image itself looks great.

The initial image which I select is 2000 x 600 px and 107KB. I crop it to 500 x 100 and use an exportZoom of 4. The resulted image is 2000 x 400, but 720KB. I assumed I need to use quality, but it does not change the result. It doesnt matter which value I assign to quality the result is always 720KB.

Here is the full code:

$('#image-cropper-profile-header').cropit({
        allowDragNDrop: false,
        exportZoom: 4,
        smallImage: 'allow',
        maxZoom: 1, // higher than 1 means loss of quality
        quality: 0.5
    });

    $(".cropit-image-input").change(function() {
        $(".cropit-preview").css("display", "inherit");
        $("#image-cropper-profile-header input[type='range']").css("display", "inherit");
        $("#image-cropper-profile-header button").css("display", "inherit");        
    });

    // Exporting cropped image
    $('#image-cropper-profile-header button').click(function() {
      var imageData = $('#image-cropper-profile-header').cropit('export');
      $(this).text('Processing...');
      $(this).attr('disabled', true);
      $.ajax({
            url : "/profile/edit-user-header-image-crop-it",
            type : "POST",
            contentType: 'application/json;charset=UTF-8',
            data : JSON.stringify({'imagedata' : imageData}),
            success : function(response) {
                console.log("success, crop it", response);
                location.reload();
            },
            error : function(xhr) {
                console.log("crop it failed", xhr);
            }
        });
    });
SDCRoman commented 6 years ago

After carefully reading the documentation I found the relevant piece:

[quality=.75] exported image quality, only works when type is // 'image/jpeg' or 'image/webp'.

var imageData = $('#image-cropper-profile-header').cropit('export', {
        type: 'image/jpeg', // this is needed, otherwise quality does not work only jpeg and webp
    quality: 0.85
});