像素化的跨浏览器图像缩放

Pixelated cross-browser image scaling

本文关键字：图像缩放浏览器像素更新时间：2023-09-26

我想用scale = 2.0缩放图像。我想在没有任何平滑的情况下做，所以期望的效果是将原始图像的每个像素变成相同颜色的2x2像素。

我想知道这是否有可能在Javascript/CSS中跨浏览器(>= IE7)的方式而不诉诸<canvas />标记。

对不起，我不相信你想要的效果是可能的跨浏览器没有画布。

在Firefox的Canvas中，你可以选择ctx.mozImageSmoothingEnabled = false;，但这是最接近的了。

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

任何渲染方法的细节，例如抗锯齿/平滑都不在css2.1的范围内。所以，对于CSS 2.1来说，答案是否定的。JS中的图像对象也没有缩放特性。所以再次说"不"。

我知道flash是一种垂死的技术，但是这是一些非常优秀的图像处理脚本，如果你想检查一下。对于标准的基于web的图像处理来说，这似乎有点复杂，尽管听起来像一个邪恶的想法!