很酷的主意。我想如果你不关心性能的话这并不太难。
Edit：我花了一整天的时间进行研究，做了很多测试并编写了自己的小例子。这些是我的结果：
选项 1：静态 SVG 滤镜
谢谢阿莫里·汉瑟.
您可以定义 svg 过滤器并在 css 中使用它：（请参阅https://stackoverflow.com/a/66625778/6292230 https://stackoverflow.com/a/66625778/6292230)
这个解决方案在各个方面都很漂亮。
然而，苹果不喜欢你。一些过滤器或属性是Safari 不支持在 macOS 和 iOS 上。例如：当用作 CSS 过滤器时，Safari 会忽略 x、y、宽度、高度，这使得大多数解决方案毫无用处。如果您可以控制环境（例如 WebView、Electron...），这是最好的解决方案。
选项 2：动态 SVG 滤镜
计算工作量：每个视口调整大小/页面加载一次
这应该可以跨浏览器工作。在最新的 Safari、Chrome 和 Firefox (macOS) 上进行了测试。
您可以使用选项 1 中所述的类似技术。
但是，您必须将点阵渲染到屏幕外画布并将其注入 svg 过滤器中。每次视口大小发生变化时（例如，在调整大小事件之后），您都必须重新进行计算。
工作代码和盒子示例：https://codesandbox.io/s/pixelate-page-demo-dt6w0?file=/src/index.js https://codesandbox.io/s/pixelate-page-demo-dt6w0?file=/src/index.js （如果没有显示效果，请点击右侧iframe中的重新加载按钮）
- 在你的体内创建一个空的 svg 过滤器
<body>
<svg>
<filter
id="pixelate"
x="0"
y="0"
width="700"
height="900"
filterUnits="userSpaceOnUse"
></filter>
</svg>
</body>
- 动态创建并注入 svg 过滤器，如下所示
function pixelate(tileSize = 10, sigmaGauss = 2) {
tileSize = tileSize < 1 ? 1 : tileSize;
sigmaGauss = sigmaGauss < 1 ? 1 : sigmaGauss;
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// only to make the output visible
// document.body.appendChild(canvas);
const rows = canvas.height / tileSize;
const cols = canvas.width / tileSize;
for (let r = 0; r < rows; r++) {
for (let c = 0; c < cols; c++) {
ctx.fillStyle = "white";
ctx.fillRect(
c * tileSize - 1 + Math.floor(tileSize / 2),
r * tileSize - 1 + Math.floor(tileSize / 2),
1,
1
);
}
}
const pixelate = document.getElementById("pixelate");
pixelate.innerHTML = "";
const blur = document.createElementNS(
"http://www.w3.org/2000/svg",
"feGaussianBlur"
);
blur.setAttribute("in", "SourceGraphic");
blur.setAttribute("stdDeviation", sigmaGauss);
blur.setAttribute("result", "blurred");
const hmap = document.createElementNS(
"http://www.w3.org/2000/svg",
"feImage"
);
const hmapUrl = canvas.toDataURL();
hmap.setAttribute("href", hmapUrl);
hmap.setAttribute("result", "hmap");
const blend = document.createElementNS(
"http://www.w3.org/2000/svg",
"feBlend"
);
// blend.setAttribute("mode", "lighten");
blend.setAttribute("mode", "multiply");
blend.setAttribute("in", "blurred");
blend.setAttribute("in2", "hmap");
const morph = document.createElementNS(
"http://www.w3.org/2000/svg",
"feMorphology"
);
morph.setAttribute("operator", "dilate");
morph.setAttribute("radius", tileSize / 2);
pixelate.setAttribute("width", canvas.width);
pixelate.setAttribute("height", canvas.height);
pixelate.appendChild(blur);
pixelate.appendChild(hmap);
pixelate.appendChild(blend);
pixelate.appendChild(morph);
}
- 页面加载/视口调整大小调用后
pixelate(5, 1); // 5 = tileSize, 1 = std deviation gaussian blur
- 添加CSS。提示：请勿使用
display: none;隐藏 svg，因为它会在 Firefox 中损坏
html {
filter: url(#pixelate);
}
svg {
position: absolute;
height: 0;
}
选项 3：覆盖画布
计算工作量：每次 DOM 更改
如果没有可行的示例，我就会这样做：
-
将页面渲染到 DOM
-
将页面渲染到画布（请参阅 html2canvas：http://html2canvas.hertzen.com http://html2canvas.hertzen.com或者更好的 rasterizeHTML：https://github.com/cburgmer/rasterizeHTML.js https://github.com/cburgmer/rasterizeHTML.js)
-
覆盖画布position: absolute; left: 0; top: 0; width: 100%; z-index: 100;
-
不要捕捉画布上的点击，以便下面渲染的 DOM 上的按钮/链接将起作用pointer-events: none;
-
缩放画布而不进行图像平滑（请参见此处：如何使用canvas和javascript对图像进行像素化 https://stackoverflow.com/questions/19129644/how-to-pixelate-an-image-with-canvas-and-javascript)
尝试阻止动态重新渲染以获得最佳性能。
选项 4：WebGL 着色器
计算量：每帧
迄今为止最酷的方法是通过 WebGL 渲染您的网站并使用着色器来创建所需的效果。
- 您可以扩展选项 3，渲染全尺寸画布（请记住为视网膜设备渲染双倍尺寸），获取 WebGl 上下文并附加着色器
- 或者，您可以使用 HTML GL (http://htmlgl.com/ http://htmlgl.com/）。我不会推荐它，因为它似乎没有维护，也不支持视网膜设备（=>因此一切都会模糊）
