是否可以在没有画布的情况下对图像进行像素化？答案

【问题标题】：Is it possible to pixelate an image without canvas?是否可以在没有画布的情况下对图像进行像素化？
【发布时间】：2016-05-12 23:51:56
【问题描述】：

给定一个<img> 元素，是否可以仅使用 CSS 和/或不使用画布对图像进行像素化？我见过crisp edges 功能（但这仅适用于缩放的图像）和很多画布选项，但我希望有更好的方法。

【问题讨论】：

这看起来不像是对资源的请求。它询问的是 CSS 技术。
这个问题完全有效。 image-rendering: pixelated;developer.mozilla.org/en/docs/Web/CSS/image-rendering
可以使用 CSS 过滤器：developer.mozilla.org/en-US/docs/Web/CSS/filter 不幸的是，没有内置的像素化过滤器，但您可以使用 url 函数指定自定义过滤器，该过滤器可以从 svg 元素中提取过滤器。在您的 svg 中，您可以使用一系列不同的滤镜效果（请参阅developer.mozilla.org/en-US/docs/Web/SVG/Element 的 fe* 元素）。这些滤镜效果的某些组合可能会产生像素化效果。

【解决方案1】：

您可以通过使用 image-rendering: pixelated; CSS 规则并放大图像 - see this article 来实现像素化效果。

【讨论】：

所以如果我想保持图像的自然大小，你有什么建议？缩放它，应用image-rendering，然后将其剪裁到原始大小？还是有更简单的方法？
虽然你会剪掉图像的一部分（尽管它是像素化的），但这会起作用。您还可以尝试将源图像保存为比您实际需要的更小的尺寸，然后应用image-rendering: pixelate;，然后将其放大到您想要的尺寸。
是的，这就是问题所在，我无法控制正在显示的图像，所以我不能将其保存为较小的尺寸。
在这种情况下，我会尝试使用image-rendering 和transform: scale(0.5); 以及类似width: 200%; height: 200%; 的东西。这些规则的某种组合应该能够实现您想要的。
值得注意的是，截至 2019 年，这仅适用于基于 webkit 的浏览器