绘制到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

问题

主要错误是您没有指定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;

这里修改了工作小提琴

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

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