मैं छवियों का आकार बदलने के लिए एचटीएमएल 5 कैनवास तत्वों का उपयोग करता हूं। यह पता चला है कि गुणवत्ता बहुत कम है। मुझे यह पता चला: जब एक <कैनवास> स्केलिंग इंटरपोलेशन को अक्षम करता है, लेकिन यह गुणवत्ता को बढ़ाने में मदद नहीं करता है।
नीचे मेरा css और js कोड है और साथ ही छवि को फ़ोटोशॉप के साथ और कैनवास एपीआई में स्केल किया गया है।
ब्राउज़र में एक छवि को स्केल करते समय मुझे इष्टतम गुणवत्ता प्राप्त करने के लिए क्या करना होगा?
नोट: मैं एक बड़ी छवि को एक छोटे से स्केल करना चाहता हूं, एक कैनवास में रंग को संशोधित करना और कैनवास से सर्वर पर परिणाम भेजना।
सीएसएस:
canvas, img {
image-rendering: optimizeQuality;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;
}
जे एस:
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);
});
फ़ोटोशॉप के साथ छवि का आकार बदला गया:
छवि कैनवास पर आकार:
संपादित करें:
जैसा कि प्रस्तावित है: मैंने एक से अधिक चरणों में चढ़ाव करने की कोशिश की:
एचटीएमएल 5 कैनवास और एचटीएमएल 5 कैनवस ड्रॉइमेज में एक छवि का आकार बदलना : एंटीअलियासिंग कैसे लागू करें
यह वह फ़ंक्शन है जिसका मैंने उपयोग किया है:
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 के एल्गोरिथ्म की कोशिश की। यहाँ फ़ोटोशॉप की तुलना में परिणाम है।
फ़ोटोशॉप छवि:
GameAlchemist का एल्गोरिथम:
