如何禁用JS Canvas外邊緣的平滑處理？

Question

我正在使用context.drawImage將一個畫布的內容繪製到另一個畫布上。

我設法在Chrome 30上使用imageSmoothingEnabled = false來禁用平滑（抗鋸齒）功能，但圖像的外邊界仍然是平滑的。有沒有辦法來禁用呢？

看看下面的小提琴和圖像。內部矩形很好地鋸齒狀，但外部不是。

http://jsfiddle.net/VzX4Q/2/

Answer 1

你所觀察是兩個不同的過程組合成你看到的結果。

縮放圖像本身的處理與轉換圖像本身是分開的。

這意味着圖像在本例中是源畫布，它是，縮放爲（如果需要），並且只有imageSmoothingEnabled才適用。

從官方canvas document (editor's draft)（我的強調）：

如果imageSmoothingEnabled屬性被設置爲真，則用戶 代理可以使用任何過濾算法以平滑圖像數據，當它 是縮放 ......」

和this section：

上下文。 imageSmoothingEnabled [=值]

返回圖案是否填充和的drawImage（）方法將試圖 以平滑圖像如果他們不得不重新調整它們，而不是僅僅 渲染像素化圖像。

然後有一個轉換矩陣，它將使用平滑將所有東西轉換，因爲它只知道源像素位置和目標像素位置之間的關係，而不管源產生的是什麼。因此，即使圖像本身沒有進行平滑繪製，其結果像素也是轉換階段平滑的目標（您也可以通過任何轉換查看）。

要與所有你需要手動自己實現轉型沒有平滑做到這一點。本質上並不難，但與內部轉型相比，性能成本相對較高。

在特殊條件下你也許可以根據它們的值，當你需要遍歷使用JavaScript像素的閾值，但性能將在這兩種情況下命中過濾掉像素。

在這種情況下但也可以是或可以不是作爲圖像的內部的錯誤是（顯然）不同時它的邊界是平滑。該錯誤將與圖像而不是被平滑相關，但因爲它被假定爲只在縮放圖像時平滑圖像（如果我能夠正確解釋文檔，但也基於如何定義「縮放」）。