我想绘制PNG图像到画布上，但质量真的很差。我做的，使用的drawImage方法：质量差的PNG图像绘制到HTML画布

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.

enter image description here

来源

2013-10-31 hjuster

请显示更多您正在使用的代码（小提琴会超级）。在上面的例子中，你也有一个逗号（而不是;），在上面的例子中清除和绘制之间，不知道这是否是一个错字？如果没有调整大小，则不需要为drawImage（）方法提供宽度和高度。 – K3N

这是一个jfiddle http://jsfiddle.net/UffUv/1/ – hjuster

问题

主要错误是，你不canvas元素指定大小 - 你只指定了元件本身的CSS大小，这意味着画布背景下将工作默认大小为300 x 150像素。

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

解决方案

要解决，你需要专门设置canvas元素的大小（以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

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

后者可以帮助你调试这个问题 - 如果你把它们遗漏了，你会发现在这种情况下图像被绘制得非常大，表明画布没有设置合适的尺寸。

来源

2013-11-01 17:13:10 K3N

质量差的PNG图像绘制到HTML画布

回答

问题

解决方案

相关问题