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

Question

我正在尝试将 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)
};

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

任何想法是什么导致了这个问题以及如何解决它？ 这是一个带有示例的 jfiddle。

Answer 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;

修改工作小提琴here

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

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