我使用 fengyuanchen 的 cropper.js (1.5.9)。我有来自 5472px x 3648px (350 dpi) 的高分辨率图像。我将这些图像裁剪为 577px x 377px 的分辨率。当我裁剪图像时,目标质量很差。
我们现在在裁剪的图像上看到奇怪的圆圈,图像质量很差。我使用以下代码:
$('#crop').click(function(){
canvas = cropper.getCroppedCanvas({
width: 577,
height: 377,
minWidth: 256,
minHeight: 256,
maxWidth: 5472,
maxHeight: 3648,
fillColor: '#fff',
imageSmoothingEnabled: true,
imageSmoothingQuality: 'high',
});
canvas.toBlob(function(blob){
url = URL.createObjectURL(blob);
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function(){
var base64data = reader.result;
$.ajax({
url:'pages/mediaupload.php',
method:'POST',
data:{
image:base64data,
我已经阅读了很多 cropper.js en 尝试不同的设置,但质量仍然保持不好。
哇。这是一个用于下采样的图像的病态案例。除非你反对,否则我将它放入我的难以处理的图像的测试套件中。
您在较小的图像上看到的令人讨厌的工件是由建筑物上的网格状砖砌与下采样网格交互生成的Moiré pattern。好消息是大多数图像不会有这个问题。
您的示例没有显示您传递给the canvas.toBlob()
method的第二个和第三个参数。如果您还没有这样做,请尝试将它们指定为'image/jpeg'
和 0.6 到 0.9 之间的某个数字。
而且,尝试告诉裁剪器使用原始图像的大小,而不是在裁剪时使其变小。
缩小尺寸的高质量方法是使用双三次插值。或者,您可以在缩小图像尺寸之前对图像应用高斯模糊。如果将宽度从 2000 缩小到 500,则使用半径为 2.0 像素的模糊,这将从网格状的砖砌结构中删除足够的细节,以至于莫尔条纹不会那么容易看到。您可能可以找到浏览器驻留的高斯模糊模块,例如glur。
同样,这个特定的图像非常容易受到这个问题的影响。
作者在Github repo中的notes中对此进行了说明。
简而言之:浏览器原生压缩是有损的。考虑到您的方法,您可以通过 upload-endpoint 实现 PHP-resizer(例如imagine),并将原始图像与裁剪数据一起传递。
本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处
评论列表(25条)