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

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

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

Answer 1

问题

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

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

解决方案

要修复你需要专门设置canvas元素的大小（以CSS像素为单位）而不是使用CSS规则：

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

将它们直接设置为canvas元素作为属性而不是CSS：

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

您可以选择使用JavaScript

进行设置

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

<强> Modified working fiddle here

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

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