绘制在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)
};

以下是翻译的结果，仅供参考：

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

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

- hjuster

---

请展示更多您正在使用的代码（一个fiddle会很好）。在上面的例子中，您在clear和draw之间使用了逗号（而不是;），不确定是否为笔误？如果没有进行调整大小，则不需要为drawImage（）方法提供宽度和高度。 - user1693593

这是一个 Jsfiddle 链接：http://jsfiddle.net/UffUv/1/。 - hjuster

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;

这里有修改后的工作示例

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

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

- user1693593