html5 图片质量修改,HTML5 - 画布大小调整时差的图像质量(HTML5 - Poor image quality

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调整大小实现的图像算法将产生类似的图像的ImageMagick，保持所有像素数据，因此像素平均将是相同的。

我们的算法会产生如下图：33 | 201.3

(0 * 0.66 + 100 * 0.33)| (100 * 0.33 + 255 * 0.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';