Tôi sử dụng các yếu tố canvas html5 để thay đổi kích thước hình ảnh trong trình duyệt của tôi. Hóa ra chất lượng rất thấp. Tôi đã tìm thấy điều này: Vô hiệu hóa Nội suy khi Thu nhỏ <canvas> nhưng nó không giúp tăng chất lượng.
Dưới đây là mã css và js của tôi cũng như hình ảnh được chụp bằng Photoshop và được chia tỷ lệ trong API canvas.
Tôi phải làm gì để có được chất lượng tối ưu khi thu nhỏ hình ảnh trong trình duyệt?
Lưu ý: Tôi muốn thu nhỏ hình ảnh lớn thành hình nhỏ, sửa đổi màu trong khung vẽ và gửi kết quả từ khung vẽ đến máy chủ.
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);
});Hình ảnh thay đổi kích thước với photoshop:
Hình ảnh thay đổi kích thước trên vải:
Biên tập:
Tôi đã cố gắng thu hẹp quy mô trong hơn một bước như đề xuất trong:
Thay đổi kích thước hình ảnh trong khung vẽ HTML5 và canvas vẽ Html5: cách áp dụng khử răng cưa
Đây là chức năng tôi đã sử dụng:
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);
}Đây là kết quả nếu tôi sử dụng kích thước xuống 2 bước:
Đây là kết quả nếu tôi sử dụng kích thước xuống 3 bước:
Đây là kết quả nếu tôi sử dụng kích thước xuống 4 bước:
Đây là kết quả nếu tôi sử dụng kích thước xuống 20 bước:
Lưu ý: Hóa ra từ 1 bước đến 2 bước có sự cải thiện lớn về chất lượng hình ảnh nhưng bạn càng thêm nhiều bước vào quy trình thì hình ảnh càng trở nên mờ hơn.
Có cách nào để giải quyết vấn đề mà hình ảnh trở nên mờ hơn khi bạn thêm nhiều bước không?
Chỉnh sửa 2013-10-04: Tôi đã thử thuật toán của GameAlchemist. Đây là kết quả so với Photoshop.
Ảnh PhotoShop:
Thuật toán của GameAlchemist:
