24

使用 CSSzoom属性时，如何说服浏览器使用“最近邻”而不是“双线性”或任何其他更高级的缩放算法？

我的设置是一个包含画布的 div，该 div 通过 JavaScript 获取其缩放设置<div style="zoom:3200%">...</div>，以获取最近的邻居，我image-rendering: -webkit-optimize-contrast在我的 CSS 中使用。该应用程序在此处可用（'z' 放大，'shift-z' 缩小），我的 css 在这里

这是在 OSX 上的 Chrome 中所需的效果（缩放设置为 3200%）： 使用最近邻放大 OSX/Chrome

但在 Windows 7 上的 Chrome 中也是如此： 放大 Windows/Chrome 不使用最近的邻居

在这两种情况下，它都是开箱即用的“香草”Chrome（版本 15.xx），没有打开实验标志。

如何说服 Windows 上的 Chrome 使用最近邻居？就此而言，我怎样才能说服所有浏览器？Safari 也不使用最近邻（目前该应用仅适用于基于 WebKit 的浏览器）

CSSimage-rendering属性确实会影响 Chrome/OSX 并给我想要的效果。但是 Chrome/Windows 和 Safari(5.1)/OSX 似乎都完全忽略了它。有些事情告诉我我只是运气不好，但我想我会问。

在 div 容器上使用zoom非常简单，并且在 Chrome/OSX 中运行良好，如果我必须在内部使用缩放画布，我也可以这样做。但如果可能的话，更喜欢字面上的一行代码解决方案！

更新：我发现使用image-rendering: optimizeSpeed帮助。然而，它在 Chrome/Windows 中似乎很挑剔。如果我将它设置在太多元素上（我最初尝试过，我的容器和所有画布），它不会生效。但如果我将它应用到 just canvas，我会得到 98% 的结果。

现在我的问题是我第一次在放大时绘图，它工作得很好，所有其他后续绘图动作在它们发生时都是模糊的，然后恢复到正确的最近邻居（我的应用程序首先绘制到临时画布，然后将绘图应用到真实的画布上）。Chrome 坚持使用双线性的草稿画布有些奇怪。我认为通过一些挖掘我可以解决这个问题。

UPDATE2：似乎image-rendering在 Chrome/Windows 上实现得并不好，而且有点问题。我现在可以确认 Chrome/Windows 不支持这些optimizeSpeed值optimizeQuality。如果您为它们设置图像渲染，Chrome 将忽略该设置。Chrome/Windows 确实可以识别-webkit-optimize-contrast，但它并没有始终如一地使用它。Chrome 将几乎随机地在看起来是双线性缩放算法和最近邻算法之间切换。我无法始终让 Chrome 使用最近邻。

我在 Windows 上尝试了 Chromium 17 的构建，它的行为方式相同。

Firefox (8.0.1) 看起来很有希望，因为它看起来-moz-crisp-edges确实很好。最初我将 Chrome 定位为这个应用程序的“理想浏览器”，我可能会切换到 Firefox。

最后，似乎image-rendering对 Chrome 的适当支持正在酝酿之中，只是还没有完全实现。WebKit 本身声称完全支持所有图像渲染值，但我猜测 Chrome 使用的 WebKit 构建还没有完全更新到这个新修复。

4

3 回答 3

14

有一种方法。我在这里问了一个类似的问题：如何在没有抗锯齿的情况下拉伸图像并得到很好的回应。从那时起我已经对其进行了相当多的修改，但这里有一个简单的版本，点击时会拉伸（不带抗锯齿）：http: //jsfiddle.net/howlermiller/U2eBZ/1/

不过，这非常骇人听闻。除非必须，否则不要使用它。每次单击它都必须重新创建图像，因此使用大图像会很慢而且很糟糕。但它确实适用于 Chrome/Windows。

编辑：这在CSS3 规范中现在得到了支持！目前支持非常参差不齐，但Chrome 刚刚添加了支持，所以我希望我们能够在不久的将来使用它。美好时光！

.thing {
  /* IE, only works on <img> tags */
  -ms-interpolation-mode: nearest-neighbor;
  /* Firefox */
  image-rendering: crisp-edges;
  /* Chromium + Safari */
  image-rendering: pixelated;
}

演示

于 2011-12-26T23:01:35.273 回答
1

ctx.webkitImageSmoothingEnabled=false 现在似乎从 22 开始工作。

于 2013-06-16T06:03:26.070 回答
0

由于您无论如何都在使用画布，因此您不妨实现自己的缩放并手动实现最近邻居调整大小。

我怀疑即使你解决了这个问题，有一天你也会遇到其他事情。

@Timothy 的答案似乎有一些很好的代码可以用来帮助进行实际的数学运算。

于 2011-12-26T23:10:10.637 回答