Question

使用在HTML5 Canvas Resize (Downscale) Image High Quality?中找到的GameAlchemist精彩代码，我成功缩小了图像的保真度。

引用的答案返回一个新画布。如果我使用画布并使用左上角的drawImage（）或putImageData（）（即（0,0））将其写入现有画布，它看起来很棒。然而，当我尝试将图像置于现有（较大）画布中心时，它会变得像素化，尽管没有像我允许画布缩小并居中时那样糟糕。

有没有办法在没有像素化的情况下将图像放在画布的任何位置？

例如：

var canvas = document.getElementById("imageContainer");
canvas.setAttribute("height", 500);
canvas.setAttribute("width", 500);
var ctx = canvas.getContext("2d");
var image = new Image();
image.src = some_url;
// see linked answer for downScaleImage()
var newcanvas = downScaleImage(image, 0.2);
// this is vertically centred but pixelated
// ctx.drawImage(newcanvas, 0, Math.round((canvas.height-newcanvas.height)/2));
// this is at the top-left corner but beautiful
ctx.drawImage(newcanvas, 0, 0);

此外，如果没有多个小画布，是否有办法将高质量的图像组合到单个画布中而不会发生像素化？

感谢。

定位和组合图像时的HTML5 Canvas Pixelation

0 个答案: