Tarayıcımdaki resimleri yeniden boyutlandırmak için html5 tuval öğelerini kullanıyorum. Kalitenin çok düşük olduğu ortaya çıkıyor. Bunu buldum: Bir <canvas> 'ı Ölçeklerken İnterpolasyonu Devre Dışı Bırakın, ancak kaliteyi artırmaya yardımcı olmaz.
Aşağıda css ve js kodumun yanı sıra Photoshop ile aranan ve canvas API'sinde ölçeklenen görüntü var.
Tarayıcıda bir görüntüyü ölçeklerken en iyi kaliteyi elde etmek için ne yapmam gerekir?
Not: Büyük bir görüntüyü küçük bir görüntüye ölçeklendirmek, bir tuvaldeki rengi değiştirmek ve tuvalden sonucu sunucuya göndermek istiyorum.
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);
});Görüntü photoshop ile yeniden boyutlandırıldı:
Resim tuval üzerine yeniden boyutlandırıldı:
Düzenle:
Ben aşağıda önerildiği gibi birden fazla adımda ölçek küçültme yapmaya çalıştı:
HTML5 tuval ve Html5 tuval çizimindeki bir görüntüyü yeniden boyutlandırma
Bu kullandığım işlevdir:
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);
}İşte 2 adım aşağı boyutlandırma kullanırsanız sonuç:
İşte 3 adım aşağı boyutlandırma kullanırsanız sonuç:
İşte 4 adım aşağı boyutlandırma kullanırsanız sonuç:
İşte 20 adım aşağı boyutlandırma kullanırsanız sonuç:
Not: 1 adımdan 2 adıma kadar görüntü kalitesinde büyük bir iyileşme olduğu ortaya çıkar, ancak sürece ne kadar çok adım eklerseniz, görüntü o kadar bulanık olur.
Eklediğiniz daha fazla adım, resmin daha bulanık hale gelmesi sorununu çözmenin bir yolu var mı?
Edit 2013-10-04: GameAlchemist algoritmasını denedim. İşte Photoshop ile karşılaştırıldığında sonuç.
PhotoShop Görüntüsü:
GameAlchemist Algoritması:
