HTML5 - 调整画布时图片品质不佳 [英] HTML5 - Poor image quality when resizing canvas

问题描述

我正在制作和图片上传页面与客户端图片调整大小（使用HTML5画布）。一切正常，但问题是图像质量不是很好。

I am in the process of making and image uploading page with client side image resizing (using HTML5 canvas). Everything is working, but the problem is that the image quality is not very good.

这是一个到正在进行中的照片库的链接，其中包含我调整大小/上传代码生成的图片。

Here is a link to a (work in progress) photo gallery with images that my resize/upload code has generated.

你能看到我的质量差的意思吗？许多锯齿边缘，特别是在缩略图上。

Can you see what I mean by poor quality? Lots of jagged edges, especially on the thumbnail images. Any ideas of how to fix this?

这是我的javascript生成缩略图：

Here is my javascript for generating the thumbnails:

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];
}

推荐答案

数量是在两个权力的跳跃，所以你有更少的混叠伪像，然后只做一个最后调整大小的剩余部分。例如：如果你需要将1000px缩小到68px，缩放到500px，然后是250px，然后是125px，最后是68px。

The general rule for resizing large amounts is to go in jumps of powers of two so you have fewer aliasing artifacts, then just do one final resize for the rest of the way. Ex: if you need to rescale 1000px down to 68px scale it down to 500px, then 250px, then 125px, then to 68px. It's always a power of two until the last one.

此外，你应该保留宽高比，否则你会在对角线上得到时髦的混叠效果。如果您需要来自非正方形源图像的正方形缩略图，那么尽可能接近您的目标正方形，同时仍然较大，然后在中心裁剪。 （或者更小和垫它）。您必须不惜一切代价保留长宽比。

Also, you should preserve the aspect ratio or you'll get funky aliasing at diagonals. If you need square thumbnails from non-square source images then size down as close as you can get to your target square while still being bigger, then crop it in the center. (Or go smaller and pad it). You must preserve the aspect ratio at all costs.

为了获得比我所描述的更好的效果，您必须实现自己的调整大小算法慢（因为他们将在JS而不是优化的本地代码）。跳入WebGL也可能是一个选项。

To get even better results than what I've described you'd have to implement your own resizing algorithms which will be far slower (since they would be in JS instead of optimized native code). Jumping into WebGL might also be an option.

这篇关于HTML5 - 调整画布时图片品质不佳的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！