繪制到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;

這里修改了工作小提琴

然后繪制圖像。 正如上面的評論中提到的，代碼中也存在拼寫錯誤，如果不重新調整圖像大小，則無需指定其寬度和高度。

后者可以幫助你調試這個問題 - 如果你把它們排除在外，你會看到在這種情況下繪制的圖像非常大，表明畫布沒有正確的大小設置。