私は多くの解決策と提案を克服しましたが、何もうまくいきません。画像のアップロードにdropzoneを使用し、画像をトリミングするためにcropper jsを使用しています。しかし、画像をトリミングするたびに、画像の品質が低下します(ぼやけます)
実際の画像
https://i.stack.imgur.com/UsVqz.jpg
画像のトリミング
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');
})
});
}```