css - 使用 css 很好地缩放 Canvas

Question

我正在尝试在 Canvas 上绘制图像，然后使用 css 将 Canvas 调整到一定尺寸。事实证明，许多浏览器并不能很好地缩小 Canvas 。 OS X 上的 Firefox 似乎是最差的之一，但我没有测试太多。这是问题的一个最小示例:

HTML

<img>
<canvas></canvas>

CSS

img, canvas {
  width: 125px;
}

JS

var image = document.getElementsByTagName('img')[0],
    canvas = document.getElementsByTagName('canvas')[0];

image.onload = function() {
  canvas.width = image.width;
  canvas.height = image.height;

  var context = canvas.getContext('2d');
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
}

image.src = "http://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Helvetica_Neue_typeface_weights.svg/783px-Helvetica_Neue_typeface_weights.svg.png"

在代码笔中运行:http://codepen.io/ford/pen/GgMzJd

这是 Firefox 中的结果(视网膜显示屏的屏幕截图):

发生的事情是<img>和 <canvas>以相同大小开始，并由浏览器使用 css 缩小(图像宽度为 783px)。显然，浏览器在 <img> 上做了一些很好的平滑/插值。 , 但不在 <canvas> 上.

我试过:

• image-rendering ，但默认值似乎已经是我想要的。
• 黑客解决方案，如 scaling the image down in steps ，但这没有帮助:http://codepen.io/ford/pen/emGxrd .
• Context2D.imageSmoothingEnabled ，但再一次，默认值描述了我想要的。

如何使右边的图像看起来像左边的图像？最好使用尽可能少的代码(例如，我宁愿不自己实现双三次插值)。

Answer 1

您可以通过按 window.devicePixelRatio 值缩放 Canvas 的后备存储来解决像素化问题。不幸的是，劣质图像过滤目前似乎是浏览器的限制，唯一可靠的解决方法是 roll your own .

将您当前的 onload 替换为:

image.onload = function() {
  var dpr = window.devicePixelRatio;
  canvas.width = image.width * dpr;
  canvas.height = image.height * dpr;

  var context = canvas.getContext('2d');
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
}

结果:

在 Windows 8.1 上的 Firefox 35.0.1 上测试。请注意，您当前的代码不处理浏览器缩放事件，这可能会重新引入像素化。您可以通过处理调整大小事件来解决此问题。