私はhtml5キャンバス要素を使用して、ブラウザーで画像のサイズを変更します。品質が非常に低いことが判明しました。私はこれを見つけました：<canvas>のスケーリング時に補間を無効にしますが、品質の向上には役立ちません。
以下は、CSSとJSのコードと、Photoshopで呼び出され、キャンバス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/...
—
Markeの
可能性のある重複のHTML5キャンバスのdrawImage：アンチエイリアスを適用する方法。それが機能しないかどうかを確認します。画像が大きく、小さいサイズに縮小されている場合は、段階的に行う必要があります（リンクのサンプル画像を参照）
@confileで補間をオフにすると、最悪になります。これを有効にしておく必要があります。上記で提供したリンクを見てください。大きな画像を縮小して品質を維持するための手順を使用する方法を示します。スコットが言うように、スピードよりも品質を優先したいのです。
@ Ken-AbdiasSoftwareアプローチを試してみましたが、問題は、ステップワイズスケーリングに使用するラウンド数が増えると悪化することです。それを修正する方法はありますか？
—
confile 2013
確かに、HTML5を使用して高価なプロの写真編集ソフトウェアの機能を複製する可能性はかなり少ないでしょう。おそらく近くにありますが、Photoshopで機能するのとまったく同じとは思えません。
—
Liam
