相关疑难解决方法(0)

使用CSS zoom属性时,如何说服浏览器使用"最近邻居",而不是"双线性"或任何其他更高级的缩放算法？

我的设置是一个包含画布的div,而div通过JavaScript得到它的缩放集<div style="zoom:3200%">...</div>并且得到最近的邻居,我image-rendering: -webkit-optimize-contrast在我的CSS中使用.该应用程序在这里可用('z'放大,'shift-z'缩小),我的css在这里

以下是Chrome OSX上的预期效果(缩放设置为3200%):

但是在Windows 7上的Chrome中也是如此:

在这两种情况下,它都是"vanilla"Chrome(版本15.xx)开箱即用,没有打开实验标志.

如何说服Windows上的Chrome使用最近邻居？就此而言,我如何说服所有浏览器？Safari也不使用最近邻居(到目前为止该应用仅适用于基于WebKit的浏览器)

CSS image-rendering属性确实会影响Chrome/OSX并为我提供所需的效果.但Chrome/Windows和Safari(5.1)/ OSX似乎都完全忽略了它.有些东西告诉我,我只是运气不好,但我想我会问.

使用zoomdiv容器非常简单,并且在Chrome/OSX中运行得非常漂亮,如果我必须在内部扩展我的画布,我也可以这样做.但是如果可能的话,更喜欢字面上的一行代码解决方案!

更新:我找到了image-rendering: optimizeSpeed帮助的使用.但是在Chrome/Windows中看起来很糟糕.如果我将它设置在太多元素上(我最初尝试过,我的容器和所有画布),它都不会生效.但是,如果我将它应用于公正canvas,那么我将获得98%的收益.

现在我的问题是我第一次在放大时绘制,它完美地工作,所有其他后续绘制动作在它们发生时都是模糊的,然后恢复到正确的最近邻居(我的应用首先绘制到刮刮画布,然后将绘图应用于真实画布).刮擦画布有点奇怪,Chrome坚持使用双线性.我想通过一些挖掘,我可以解决这个问题.

更新2:似乎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的构建还没有完全更新到这个新的修复程序.

我有一个16x16的位图,想要创建一个包含16x16方块的SVG,其中包含图像像素的颜色.有没有一种简单的方法来实现这一目标？

我目前的想法是使用Python和PIL读取位图图像并使用相应的对象动态创建SVG图像文件.但这感觉有点笨拙,就像重新发明轮子一样.

有一个更好的方法吗？