Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Quality seem to have no effect #291

Open
SDCRoman opened this issue Jun 7, 2018 · 1 comment
Open

Quality seem to have no effect #291

SDCRoman opened this issue Jun 7, 2018 · 1 comment

Comments

@SDCRoman
Copy link

SDCRoman commented Jun 7, 2018

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
Copy link
Author

SDCRoman commented Jun 7, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant