css - Chrome/Safari 中的图像插值模式？

Question

我需要使用最近邻调整大小而不是当前使用的双三次方式来渲染图像。我目前使用以下内容：

ms-interpolation-mode: nearest-neighbor;
image-rendering: -moz-crisp-edges;

这适用于 IE 和 Firefox，但不适用于 Chrome 和 Safari。是否有任何 webkit 替代品或任何其他方式来实现这种效果？

Answer 1

编辑：现在可以使用image-rendering: -webkit-optimize-contrast;.

https://developer.mozilla.org/en-US/docs/CSS/image-rendering#Examples

这在当前版本的 Chrome 中不起作用，这里有一些有用的链接：

• http://vaughnroyko.com/state-of-nearest-neighbor-interpolation-in-canvas/
• 通过 CSS 缩放图像：-moz-crisp-edges 是否有 webkit 替代方案？

---

我没想到有办法。

一些快速的谷歌搜索几乎证实了这一点；webkit 图像插值的最高 Google 结果是：

http://code.google.com/p/chromium/issues/detail?id=1502

2008 年 9 月报告，仍未解决。

另外：https ://bugs.webkit.org/show_bug.cgi?id=40881

---

如果我需要这个，我可能会编写一个 PHP 脚本来使用最近的邻居动态放大图像。

这将适用于每个浏览器，但是您将拥有所有额外的处理和传输开销。

Answer 2

我刚刚试过这个：

img {image-rendering: pixelated;}

它在 Chrome 39.0.2145.4 dev-m 上运行良好

Answer 3

您现在可以设置执行drawImage时使用的算法

   ctx.imageSmoothingQuality = "high"

来源：https ://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingQuality