我想繪製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畫布

回答

問題

解決方案

相關問題