模糊的图像和使用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中的画布呈现的文本

回答

相关问题