使用Cropper js 裁剪后图像质量降低 [英] Using Cropper js Image quality get reduced after cropping
本文介绍了使用Cropper js 裁剪后图像质量降低的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我克服了很多解决方案和建议,但对我没有任何作用.我正在使用 dropzone 进行图像上传和cropper js 来裁剪图像.但是每次裁剪图像后,图像质量都会降低(模糊)
实际图片
I overcome lot of solutions and suggestion but nothing work for me. I am using dropzone for Image upload and cropper js to crop the image. But every time after i cropped the image, the quality of image get reduced (blured)
Actual Image
https://i.stack.imgur.com/UsVqz.jpg
Crop Image
https://i.stack.imgur.com/snAuB.png
//This is my cropper js code, As per the documentation I have set max height, max width, imageSmoothingQuality etc. But still image qualty get reduced after crop.
var $cropperModal = $("<div>Company Logo</div>");
$cropperModal.modal('show').on("shown.bs.modal", function() {
var $image = $('#img-' + c);
var cropper = $image.cropper({
aspectRatio: 1//,
}).on('hidden.bs.modal', function() {
$image.cropper('destroy');
});
//After I uploaded the image, Below code allow me to crop the image
$cropperModal.on('click', '.crop-upload', function() {
$image.cropper('getCroppedCanvas', {
width: 160,
height: 90,
minWidth: 256,
minHeight: 256,
maxWidth: 4096,
maxHeight: 4096,
fillColor: '#fff',
imageSmoothingEnabled: false,
imageSmoothingQuality: 'high'
})
.toBlob(function(blob) {
// Create a new Dropzone file thumbnail
myDropZone.createThumbnail(
blob,
myDropZone.options.thumbnailWidth,
myDropZone.options.thumbnailHeight,
myDropZone.options.thumbnailMethod,
false,
function(dataURL) {
// Update the Dropzone file thumbnail
myDropZone.emit('thumbnail', file, dataURL);
// Return the file to Dropzone
done(blob);
});
$cropperModal.modal('hide');
});
})
.on('click', '.rotate-right', function() {
$image.cropper('rotate', 90);
})
.on('click', '.rotate-left', function() {
$image.cropper('rotate', -90);
})
.on('click', '.reset', function() {
$image.cropper('reset');
})
});
}```
解决方案
I'm using cropper js i came across same issue, following was the solution for me. (I'm sharing here so that it can help others)
- Set parameter qualityArgument to value 1 of toBlob method
Set imageSmoothingEnabled to true of getCroppedCanvas and did not set height, width
cropper.getCroppedCanvas({ minWidth: 256, minHeight: 256, maxWidth: 4096, maxHeight: 4096, fillColor: '#fff', imageSmoothingEnabled: true, imageSmoothingQuality: 'high', }); cropper.getCroppedCanvas().toBlob(function (blob) { var formData = new FormData(); formData.append('upload', blob, 'imagetest.jpeg'); $.ajax('/ListingManager/Images/index', { method: 'POST', data: formData, processData: false, contentType: false, success: function () { console.log('success'); }, error: function () { console.log('error'); } }); }, 'image/jpeg', 1);
And here is the result
这篇关于使用Cropper js 裁剪后图像质量降低的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文