9

我正在使用客户端图像调整大小（使用 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];
}
4

3 回答 3

5

大量调整大小的一般规则是进行 2 次方的跳跃，以减少混叠伪影，然后在余下的过程中只进行一次最终调整。例如：如果您需要将 1000 像素重新缩放到 68 像素，则将其缩小到 500 像素，然后是 250 像素，然后是 125 像素，然后是 68 像素。在最后一个之前，它始终是 2 的幂。

此外，您应该保留纵横比，否则您会在对角线处获得时髦的锯齿。如果您需要来自非方形源图像的方形缩略图，则在尽可能接近目标方形的同时缩小尺寸，同时仍然更大，然后在中心裁剪它。（或者变小并填充它）。您必须不惜一切代价保持纵横比。

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

于 2013-04-22T03:47:15.500 回答
3

http://output.jsbin.com/palota/1/

我做了一个画布调整大小插件。其中一个文件可以包含在前端。它逐个像素地进行。它不是抓取附近的像素，而是平均颜色，因此从原始图像到新图像的平均像素颜色是相同的。

https://github.com/danschumann/limby-resize

并且要包含的实际文件是

https://github.com/danschumann/limby-resize/blob/master/lib/canvas_resize.js

这将产生与 Photoshop 或 imagemagick 相同类型的调整大小。

它有点慢，因为我们必须查看所有像素并重新分配每一点颜色，但对于不经常完成的工作，它可以工作。

算法背后的数学

假设我们将 3 个像素调整为 2 个像素。

通常，每个像素将有 4 个数字：红色、绿色、蓝色、alpha。让我们看一个简化版本，其中像素只是 1 个数字。

假设原始图像是：0 | 100 | 255

常规画布 drawImage 调整大小将导致 0 | 100 或 0 | 255

这有时很好，但它会丢失细节，并且可能是一个非常丑陋和锯齿状的图像。如果你仔细想想，原来所有颜色的总和是 355（0 + 100 + 255），剩下的平均像素是 118.33。调整后的平均像素为 50 或 127.5，看起来还可以或非常不同！

在limby-resize中实现的图像算法会产生与imagemagick相似的图像，保留所有像素数据，因此平均像素将是相同的。

我们的算法将生成以下图像： 33 | 201.3

(0 * .66 + 100 * .33) | (100 * .33 + 255 * .66)

我们的总数是 234.3，剩下的平均值是 117.15，这将等于第一张图像（如果我们在此示例中不四舍五入到小数点后 2 位）。

浏览器支持

canvas_resize.js应该能够包含在前端以便更好地调整客户端的大小。

var img, canvas, resized;
img = new Image;
img.onload = function(){
  canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
  resized = document.createElement('canvas');
  resized.width = 300;
  resized.height = 500;
  // see lib/canvas_resize for window.canvasResize = function(){...}
  canvasResize(canvas, resized);
  // resized will now be a properly resized version of canvas
}

img.src = '/path/to/img.jpg';
于 2014-07-30T19:29:22.180 回答
0

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

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

于 2012-12-18T13:46:49.930 回答