模糊的圖像和使用HTML5中的畫布呈現的文本

我用於使用畫布元素以HTML5呈現圖像。但是在一些瀏覽器中，圖像很模糊。我試圖用img元素替換畫布元素，然後變得晶瑩剔透。然而，對於某些圖像，我必須使用畫布，因爲我在圖像上呈現文字疊加層（用畫布繪製的文本也是模糊的）。我不知道爲什麼模糊發生，有沒有辦法解決這個問題？模糊的圖像和使用HTML5中的畫布呈現的文本

來源

2014-02-12 darklord

您正在使用的drawImage的大小調整的版本調整原始圖像大小？如果是這樣，你可以使用這篇文章中的方法之一：http://stackoverflow.com/questions/18922880/html5-canvas-resize-downscale-image-high-quality – markE

是的我設置的寬度和高度屬性的帆布。但是，如果我使用img並調整大小，圖片依然清晰可見。 – darklord

確保您設置畫布元素的寬度/高度 - 而不是CSS。如果不成比例地使用CSS調整畫布大小，則生成的圖像將會失真。所以這樣做：var canvas = document.getElementById（「myCanvas」）; canvas.width = image.width; canvas.height = image.height。再次...如果您使用drawImage重新調整尺寸，您應該檢查上面的鏈接。 – markE

的問題是，對具有高分辨率屏幕的設備可以有一個devicePixelRatio不是1：1獲得水晶清晰的圖像和文字。雖然具有Retina Screen的Mac-Books的devicePixelRatio爲1：2，但Nexus 7的devicePixelRatio約爲1.325。

enter image description here

這裏查看更多信息： http://www.html5rocks.com/en/tutorials/canvas/hidpi/

來源

2014-02-16 17:47:07 darklord

由於您未顯示相關代碼，因此此答案將是通用的 - 根據需要進行調整。

只需在畫布設置爲圖像的大小：

var img = document.getElementById('imageID'),  /// provide the image 
    canvas = document.getElementById('canvasID'), /// provide the canvas element 
    ctx = canvas.getContext('2d');     /// context 

canvas.width = img.width;       /// set width = image width 
canvas.height = img.height;      /// set height = image height 

ctx.drawImage(img, 0, 0);       /// draw image 1:1 @ [0, 0]

如果畫布變得太大的頁面，那麼你可以申請CSS畫布元素或簡單地設置要直接對大小畫布並以這種方式繪製圖像：

canvas.width = 500; /// example values, replace with actual ones 
canvas.height = 400; 

ctx.drawImage(img, 0, 0, canvas.width, canvas.height); /// scale image

如果這仍然不能幫助您的圖像可能太大而無法在單個步驟中縮小比例。這是因爲畫布通常使用雙線性插值（出於性能原因），而圖像元素通常在縮小的過程中被授予雙三次插值（插值在下縮放時被用作低通濾波器）。

爲了克服這一點，你可以用我在這個答案描述的技術：
Html5 canvas drawImage: how to apply antialiasing

來源

2014-02-13 03:17:10 K3N

模糊的圖像和使用HTML5中的畫布呈現的文本

回答

相關問題