HTML5 - 调整画布大小时图像质量不佳

Question

我正在制作和图像上传页面,客户端图像大小调整(使用HTML5画布).一切正常,但问题是图像质量不是很好.

这是一个指向(正在进行中)照片库的链接,其中包含我调整大小/上传代码生成的图像.

你能看出我质量差的意思吗？锯齿状边缘很多,特别是在缩略图上.有关如何解决此问题的任何想法？

这是我生成缩略图的javascript:

img.onload = function()
{
   var canvasWidth = 150;
   var canvasHeight = 150;
   var Rz = resizeCanvasSmall(img,canvasID,canvasWidth,canvasHeight);

   ctx.drawImage(img,Rz[0],Rz[1],Rz[2],Rz[3],Rz[4],Rz[5],Rz[6],Rz[7]);
   dataurl = canvas.toDataURL("image/jpeg",0.8);  // File type and quality (0.0->1.0)
   UploadFile();
}


// Function to resize canvas (for thumbnail images)
// img = image object, canvas = canvas element ID
function resizeCanvasSmall(img,canvas,width,height)
{
var sx; //The x coordinate where to start clipping
var sy; //The y coordinate where to start clipping
var swidth; //The width of the clipped image
var sheight; //The height of the clipped image

var aspectRatio = width / height;

if (img.width > img.height) // If landscape
{
    sheight = img.height;
    swidth = img.height * aspectRatio;
    sy = 0;
    sx = (img.width - swidth) / 2;
}
else //If portrait
{
    swidth = img.width;
    sheight = img.width / aspectRatio;
    sx = 0;
    sy = (img.height - sheight) / 2;
}

document.getElementById(canvas).width = width;
document.getElementById(canvas).height = height;

return [sx,sy,swidth,sheight,0,0,width,height];
}

Answer 1

调整大量调整大小的一般规则是跳过2的幂,这样你就可以减少混叠伪像,然后在剩下的时间里再做一次最后的调整.例如:如果你需要将1000px重新缩放至68px,则将其缩小至500px,然后是250px,然后是125px,然后是68px.直到最后一个,它始终是2的力量.

此外,您应该保留纵横比,否则您将在对角线上获得时髦的混叠.如果你需要来自非方形源图像的方形缩略图,那么在你仍然较大的情况下尽可能靠近你的目标方块放大,然后在中心裁剪它.(或者更小并填充它).您必须不惜一切代价保留纵横比.

为了获得比我描述的更好的结果,你必须实现自己的调整大小算法,这将慢得多(因为它们将在JS而不是优化的本机代码中).跳入WebGL也可能是一种选择.

Answer 2

我不确定幕后使用了什么，但我一直认为Processing.js 有一个看起来相当不错的图像调整大小。该文档有一些示例用法。（更新：查看调整大小的代码，它看起来与您正在做的过程类似。除了它从一个图像获取数据并将其移动到另一个图像。）

调整大小时要注意的另一件事是，如果可能的话，始终将图像大小减半，以便像素更好地排列。理想调整大小的示例为 50%、25% 等。