[英]Using Cropper js Image quality get reduced after cropping
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.
我正在使用 dropzone 进行图像上传和cropper js 来裁剪图像。 But every time after i cropped the image, the quality of image get reduced (blured)
但是每次裁剪图像后,图像质量都会降低(模糊)
Actual Image实际图像
https://i.stack.imgur.com/UsVqz.jpg https://i.stack.imgur.com/UsVqz.jpg
Crop Image裁剪图像
https://i.stack.imgur.com/snAuB.png 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.我正在使用cropper js 我遇到了同样的问题,以下是我的解决方案。 (I'm sharing here so that it can help others)
(我在这里分享,以便它可以帮助其他人)
Set imageSmoothingEnabled to true of getCroppedCanvas and did not set height, width将 getCroppedCanvas 的 imageSmoothingEnabled 设置为 true 并且没有设置高度、宽度
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这是结果
The point is quality of HTMLCanvasElement.toDataURL()重点是 HTMLCanvasElement.toDataURL() 的质量
type [Optional]
输入 [可选]
A DOMString indicating the image format.一个 DOMString 指示图像格式。 The default format type is image/png.
默认格式类型为 image/png。
encoderOptions [Optional]
编码器选项 [可选]
A Number between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/webp.一个介于 0 和 1 之间的数字,表示用于使用有损压缩的图像格式(例如 image/jpeg 和 image/webp)的图像质量。 If this argument is anything else, the default value for image quality is used.
如果此参数是其他任何参数,则使用图像质量的默认值。 The default value is 0.92 .
默认值为 0.92 。 Other arguments are ignored.
其他参数被忽略。
cropper.getCroppedCanvas({
imageSmoothingEnabled: true,
imageSmoothingQuality: 'high',
}).toDataURL('image/jpeg', 1);
And here is the result这是结果
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.