Я використовую елементи полотна 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);
});Змінено розмір зображення за допомогою фотошопу:
Змінено розмір зображення на полотні:
Редагувати:
Я намагався зробити зменшення масштабу в декількох кроках, як було запропоновано в:
Зміна розміру зображення на полотні HTML5 та малюнок канти Html5: як застосувати антиалізинг
Це функція, яку я використав:
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:
