Chrome/Safari中的图像插值模式是什么？

Question

我需要使用最近邻插值方式进行图像缩放，而不是当前使用的双三次插值方式。目前我使用以下代码：

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

这在IE和Firefox中有效，但在Chrome和Safari中无效。是否有任何webkit替代品或其他方法来实现此效果？

- Deniz Zoeteman

---

CSS 图像缩放：是否有 Webkit 替代方案来实现 Moz 的清晰边缘？此内容已存在于 Stack Overflow 上。 - Sprintstar

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 图像缩放：是否有 Webkit 替代 -moz-crisp-edges？

---

我原本认为没有办法。

而一些快速的谷歌搜索几乎证实了这一点；webkit image interpolation 的顶级谷歌搜索结果是：

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

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

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

---

如果我需要这个功能，我可能会编写一个PHP脚本，使用最近邻算法动态地将图像放大。这种方法在所有浏览器中都可以使用，但是会增加额外的处理和传输开销。

- thirtydot

---

我曾经在某个地方看到过，通过在图像上放置画布或类似的方式，在HTML5中实现这一点是可能的？ - Deniz Zoeteman

我对此一无所知。但即使如此，有条件地（如果是WebKit浏览器/Opera）使用画布来渲染图像似乎需要大量工作。您还引入了JavaScript依赖项以将<img>替换为<canvas>。 - thirtydot

我想象中的方式是：<img src="upscale.php?image=the-image-filename.png&w=300&h=300" />。或者你可以通过.htaccess创建一个更好的URL：<img src="the-image-filename.upscaled_300x300.png" />，或类似的方式。 - thirtydot

看一下那个页面的源代码。你正在添加和前置 HTML。 - thirtydot

我很高兴你解决了这个问题。如果该脚本会经常使用，你应该考虑缓存生成的图像。 - thirtydot

Answer 2

我刚刚尝试了这个：

img {image-rendering: pixelated;}

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

- Omiod

Answer 3

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

   ctx.imageSmoothingQuality = "high"

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

- Tom Larkworthy