canvas drawImage quality

Question

這是一個.png圖像（右側），以及我在左側繪製圖像的canvas元素。你能注意到質量差異嗎？ Canvas呈現圖像時明顯的質量損失。我們可以做什麼？

我在Chrome和IE9上觀察到了這個結果。其他人可能會做同樣的事情。 如何呈現圖像是很平常：在腳本中，我創建一個新的Image()對象，它的加載後，我打電話
context.drawImage(myimage, x, y);

編輯：

這是最初的圖像我在畫布上觀察到：

這裏是canva小號使我寫了後：
context.drawImage(myimage,parseInt(x),parseInt(y));

我能說什麼，偉大的答案的人。最好的狙擊手。這頂帽子是給你的。

EDIT2：

我試過context.drawImage(myimage, parseInt(x) + 0.5, parseInt(y)+ 0.5);，這裏的結果：

我認爲這是比第一次更糟糕。我在Chrome瀏覽器上觀察過，在IE9上它有點相同。

Answer 1

我剛剛創建了兩個圖像疊加，以便他們相互抵消。 它沒有工作，我有邊緣困難。

請檢查您的座標x, y是整數。 這裏使用浮點數可能會模糊圖像的一些實現儘量使其

context.drawImage(myimage, parseInt(x), parseInt(y)); 

「的像素之間的」如果這也不行，儘量使用整型值+ 0.5
我知道對於OpenGL實現，您必須使用0.5的座標才能達到像素的中心位置。

context.drawImage(myimage, parseInt(x)+0.5, parseInt(y)+0.5); 

---

編輯：

上HTML5ROCKS退房this page！

Answer 2

我知道這已經得到了回答，但我想提供更多信息來討論這裏發生了什麼，以及可以做些什麼。

---

這是因爲圖像平滑，默認爲光滑如由默認帆布雙線性/ trilieaner /雙三次算法，而你想被稱爲近鄰什麼的。

該規範最近添加了一個名爲imageSmoothingEnabled的屬性，該屬性默認爲true並確定在非整數座標上繪製的圖像或繪製縮放的圖像是否將使用更平滑的算法。如果設置爲false，則使用最近鄰居，產生較不平滑的圖像，而只是製作較大的像素。

圖像平滑最近才被添加到畫布規範中，並且不被所有瀏覽器支持，但是一些瀏覽器已經實現了該屬性的供應商前綴版本。在上下文中，Firefox和Chrome瀏覽器中存在mozImageSmoothingEnabled，Chrome和Safari中存在webkitImageSmoothingEnabled，如果將它們設置爲false，則會停止發生消除鋸齒。不幸的是，在撰寫本文時，IE9和Opera尚未實施此屬性，供應商以前綴或其他方式。

一般來說，你只需要遵循兩個規則：

1. 如果您縮放畫布，你需要禁用圖像平滑或使用最近鄰插值縮放。現在有幾種算法可以手動執行此操作，而這正是上述選項的作用。
2. 如果你沒有繪製整數座標，你會得到同樣的問題，它有相同的解決方案。如果你的瀏覽器不存在上述選項，你需要恢復到整數座標(x | 0, y | 0)

凡x | 0地板x很快，但是不會比2,147,483,647較大的數字工作：最大的32位有符號整數。

希望你的座標不會大於！

Answer 3

我覺得這個link會幫助完整。我做了同樣的事情，但在我的情況下，我使用JavaScript動態地給出了畫布的重量和高度。然後，當我聲明它時，我將高度和寬度賦予了畫布。解決問題。