像素化跨浏览器图像缩放

时间:2011-09-15 17:45:27

标签: javascript css image cross-browser scale

我想用scale = 2.0来缩放图像。我希望没有任何平滑,所以想要的效果是将原始图像的每个像素转换为相同颜色的2x2像素。

我想知道是否可以通过跨浏览器(&gt; = IE7)方式在Javascript / CSS中进行,而无需使用<canvas />标记。

3 个答案:

答案 0 :(得分:4)

抱歉,我不相信你想要的效果可能是没有画布的跨浏览器。

在Canvas的Firefox中,您可以ctx.mozImageSmoothingEnabled = false;进行操作,但这样就近了。

image-rendering: -moz-crisp-edges;可能会帮助你在firefox中进行CSS扩展,而-ms-interpolation-mode *可能会帮助你在IE中,但我怀疑你会得到一个在所有浏览器中都看起来相同的解决方案。

*我认为这已被弃用/废弃。

答案 1 :(得分:2)

渲染方法的任何细节,例如抗锯齿/平滑不属于CSS 2.1范围。因此CSS 2.1的答案是'不'。 JS中的图像对象也没有缩放功能。所以'不'再说一次。

答案 2 :(得分:1)

我知道闪存是一种垂死的技术,但如果你想检查一下,这是一些非常出色的图像处理程序。对于标准的基于Web的图像处理来说,这似乎有点复杂,尽管听起来像是一个邪恶的想法!