不使用画布，能否对图像进行像素化处理？

Question

给定一个 <img> 元素，是否可以仅使用CSS而不使用画布来像素化图像？

我看到了一些像清晰边缘这样的特性（但那只适用于缩放后的图像）和许多画布选项，但我希望有更好的方法。

- Cassidy

---

这似乎不是一个关于资源的请求，而是在询问CSS技术。 - isherwood

问题是完全有效的。 image-rendering: pixelated; 是CSS属性，用于设置图像的呈现方式为像素化。详细信息请参见https://developer.mozilla.org/en/docs/Web/CSS/image-rendering。 - Pogrindis

可能可以使用CSS滤镜实现：https://developer.mozilla.org/en-US/docs/Web/CSS/filter不幸的是，没有内置的马赛克过滤器，但您可以使用url函数指定自定义过滤器，该函数可以从svg元素中获取过滤器。在您的svg中，您可以使用许多不同的过滤器效果（请参见https://developer.mozilla.org/en-US/docs/Web/SVG/Element中的fe *元素）。这些过滤器效果的某些组合可以产生像素化效果。 - tschumann

Answer 1

您可以使用CSS规则image-rendering: pixelated;并将图像放大来实现像素化效果-请参阅此文章。

- Donald

---

那么，如果我想保持图像的自然大小，你会建议我做什么？将其缩放，应用“image-rendering”，然后将其剪切到原始大小？还是有更简单的方法？ - Cassidy

这样做是可行的，尽管你会剪裁掉图像的一部分（虽然它是像素化的）。你也可以尝试将源图像保存为比实际需要在网站上显示的大小小的尺寸，应用 image-rendering: pixelate;，然后将其缩放到所需的大小。 - Donald

是的，这就是问题所在，我无法控制显示的图像，因此不能仅将其保存为较小的尺寸。 - Cassidy

在这种情况下，我会尝试使用image-rendering与transform: scale(0.5);以及类似width: 200%; height: 200%;的东西。这些规则的某些组合应该能够实现您想要的效果。 - Donald

值得注意的是，截至2019年，这仅适用于基于Webkit的浏览器。 - Maximillian Laumeister