用css很好地缩放画布

我正在尝试在画布上绘制图像,然后使用css将画布调整到一定的大小.事实证明,许多浏览器都没有很好地缩放画布.OS X上的Firefox似乎是最差的之一,但我没有测试过很多.以下是问题的最小示例:

HTML

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"

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

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

发生了什么事是,无论是并开始在相同的尺寸和用CSS被缩小浏览器(图像宽度为783px).显然,浏览器会对其进行一些很好的平滑/插值,但不会.

我试过了:

image-rendering,但默认似乎已经是我想要的.

Hacky解决方案,例如逐步缩放图像,但这没有帮助:http://codepen.io/ford/pen/emGxrd.

Context2D.imageSmoothingEnabled,但再次,默认描述我想要的.

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

您可以通过按window.devicePixelRatio值缩放画布的后备存储来解决像素化问题。不幸的是，目前，低劣的图像过滤似乎是浏览器的限制，唯一可靠的解决方法是自行滚动。

将当前的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上进行了测试。请注意，您当前的代码无法处理浏览器缩放事件，这可能会重新引入像素化。您可以通过处理resize事件来解决此问题。