You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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);
}
});
});
The text was updated successfully, but these errors were encountered:
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
});
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:
The text was updated successfully, but these errors were encountered: