绘制到 html 画布中的 png 图像质量较差

Posted 2023-03-05

【中文标题】绘制到 html 画布中的 png 图像质量较差

【英文标题】：Poor quality of png images drawn into html canvas

【发布时间】：2013-11-11 06:40:03

【问题描述】：

我正在尝试将 png 图像绘制到画布中，但质量真的很差。 我正在使用 drawImage 方法：

src = folder+self.cur+".png";
imageObj.src = src;
imageObj.onload = function() 
    context.clearRect(0, 0, cv, ch), context.drawImage(imageObj, 0, 0, cv, ch)
;

附件是原始图像和画布中结果的屏幕截图。目前画布尺寸与图像相同，因此问题不是由调整大小引起的。

任何想法是什么导致了这个问题以及如何解决它？ Here is a jfiddle with an example.

【问题讨论】：

请显示更多您正在使用的代码（小提琴会很棒）。在上面的示例中，您在 clear 和 draw 之间还有一个逗号（而不是 ; ），不确定这是否是错字？如果没有调整大小，则不需要为 drawImage() 方法提供宽度和高度。

这是一个 jfiddle jsfiddle.net/UffUv/1

【参考方案1】：

问题

主要错误是您没有指定画布元素的大小 - 您只是为元素本身指定 CSS 大小，这意味着画布上下文将使用 300 x 150 像素的默认大小。

这会导致您显示的图像首先缩小到 300 x 150，然后通过 CSS 放大到您想要（但没有）的大小，这会产生模糊的外观。

解决方案

要解决此问题，您需要专门设置画布元素的大小（以 CSS 像素为单位），而不是使用 CSS 规则：

#mapCanvas
    /*width:664px;  Delete these
    height:980px; */

并将它们直接作为属性而不是 CSS 设置在画布元素上：

<canvas id='mapCanvas' width=664 height=980></canvas>

您可以选择使用 javascript 设置它们

 mapCanvas.width = 664;   /// use integer values
 mapCanvas.height = 980;

Modified working fiddle here

然后绘制图像。正如上面评论中提到的，您的代码中还有一个错字，如果您不重新调整图像大小，则无需指定图像的宽度和高度。

后者可以帮助您调试此问题 - 如果您将它们排除在外，您会看到在这种情况下图像被绘制得非常大，这表明画布没有设置正确的尺寸。