我使用html5 canvas元素在浏览器中调整图像大小。事实证明，质量很低。我发现了这一点：在缩放<canvas>时禁用插值，但它无助于提高质量。
下面是我的css和js代码，以及用Photoshop调用并在canvas API中缩放的图像。
在浏览器中缩放图像时，我该怎么做才能获得最佳质量？
注意：我想将大图像缩小为小图像，修改画布中的颜色并将结果从画布发送到服务器。
CSS：
canvas, img {
image-rendering: optimizeQuality;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;
}
JS：
var $img = $('<img>');
var $originalCanvas = $('<canvas>');
$img.load(function() {
var originalContext = $originalCanvas[0].getContext('2d');
originalContext.imageSmoothingEnabled = false;
originalContext.webkitImageSmoothingEnabled = false;
originalContext.mozImageSmoothingEnabled = false;
originalContext.drawImage(this, 0, 0, 379, 500);
});
图片使用Photoshop调整大小：
在画布上调整图像大小：
编辑：
我试图按照以下建议的多个步骤进行缩减：
调整HTML5画布和 Html5画布drawImage中图像的大小：如何应用抗锯齿
这是我使用的功能：
function resizeCanvasImage(img, canvas, maxWidth, maxHeight) {
var imgWidth = img.width,
imgHeight = img.height;
var ratio = 1, ratio1 = 1, ratio2 = 1;
ratio1 = maxWidth / imgWidth;
ratio2 = maxHeight / imgHeight;
// Use the smallest ratio that the image best fit into the maxWidth x maxHeight box.
if (ratio1 < ratio2) {
ratio = ratio1;
}
else {
ratio = ratio2;
}
var canvasContext = canvas.getContext("2d");
var canvasCopy = document.createElement("canvas");
var copyContext = canvasCopy.getContext("2d");
var canvasCopy2 = document.createElement("canvas");
var copyContext2 = canvasCopy2.getContext("2d");
canvasCopy.width = imgWidth;
canvasCopy.height = imgHeight;
copyContext.drawImage(img, 0, 0);
// init
canvasCopy2.width = imgWidth;
canvasCopy2.height = imgHeight;
copyContext2.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvasCopy2.width, canvasCopy2.height);
var rounds = 2;
var roundRatio = ratio * rounds;
for (var i = 1; i <= rounds; i++) {
console.log("Step: "+i);
// tmp
canvasCopy.width = imgWidth * roundRatio / i;
canvasCopy.height = imgHeight * roundRatio / i;
copyContext.drawImage(canvasCopy2, 0, 0, canvasCopy2.width, canvasCopy2.height, 0, 0, canvasCopy.width, canvasCopy.height);
// copy back
canvasCopy2.width = imgWidth * roundRatio / i;
canvasCopy2.height = imgHeight * roundRatio / i;
copyContext2.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvasCopy2.width, canvasCopy2.height);
} // end for
// copy back to canvas
canvas.width = imgWidth * roundRatio / rounds;
canvas.height = imgHeight * roundRatio / rounds;
canvasContext.drawImage(canvasCopy2, 0, 0, canvasCopy2.width, canvasCopy2.height, 0, 0, canvas.width, canvas.height);
}
如果我使用2步缩小尺寸，则结果如下：
如果我使用3步缩小尺寸，则结果如下：
如果我使用4步缩小尺寸，则结果如下：
如果我使用20步缩小尺寸，则结果如下：
注意：事实证明，从1步到2步，图像质量有了很大的提高，但是添加到过程中的步数越多，图像变得越模糊。
有没有办法解决您添加的步数越多图像越模糊的问题？
编辑2013-10-04：我尝试了GameAlchemist的算法。这是与Photoshop比较的结果。
PhotoShop图片：
GameAlchemist的算法：
2
您可以尝试逐步缩放图像：stackoverflow.com/questions/18761404/...
—
坊间
Html5 canvas drawImage的可能重复项：如何应用抗锯齿。看看是否可行。如果图像较大且缩小为较小尺寸，则需要
@ Ken-AbdiasSoftware我尝试过采用这种方法，但是问题是，我逐步进行缩放时，回合会变得更糟。任何想法如何解决？
—
2013年
使用HTML5复制昂贵的专业照片编辑软件的功能的可能性肯定很小吗？您可能会靠近（ish），但正如它在Photoshop中正常工作一样，我想那是不可能的！
—
利亚姆
