Chrome/Safari 中的图像插值模式？答案

【问题标题】：Image interpolation mode in Chrome/Safari?Chrome/Safari 中的图像插值模式？
【发布时间】：2011-07-21 05:02:58
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

我认为没有办法。

还有一些快速的谷歌搜索几乎可以确认； webkit image interpolation 的最高 Google 搜索结果是：

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

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

这适用于所有浏览器，但是您需要承担所有额外的处理和传输开销。

【讨论】：

我在某处看到，在 HTML5 中可以通过在图像上放置画布或类似的东西来实现？
我对此一无所知。但即使这是真的，有条件地（如果是 WebKit 浏览器/Opera）使用画布渲染图像确实听起来需要做很多工作。您还引入了一个 JavaScript 依赖项以使用 <canvas> 切换 <img>。
我会检查我的虚拟主机是否有 GD，如果有，我会使用它。在我得到确认之前，我不会回答我自己的问题。
我想象中的样子：<img src="upscale.php?image=the-image-filename.png&w=300&h=300" />。或者，您可以借助 .htaccess: <img src="the-image-filename.upscaled_300x300.png" /> 或类似的工具创建一个更好的 URL。
我很高兴你把它整理好了。如果该脚本会被大量使用，您应该考虑缓存生成的图像。

【解决方案2】：

我刚刚试过这个：

img {image-rendering: pixelated;}

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

【讨论】：

【解决方案3】：

您现在可以设置执行 drawImage

时使用的算法

   ctx.imageSmoothingQuality = "high"

【讨论】：