像素化整个网页

Question

像素化整个网页

fad*_*bee 6 html css pixelate

我了解如何缩放小画布以制作具有厚实而不是模糊像素的大画布。

有什么方法可以让整个网页显示为厚实的 2x2 或 3x3 像素吗？即用最近邻缩放来放大它。我想使用普通 HTML，但将其像素化以获得仿 8 位外观。

Answer 1

adr*_*ste 9

很酷的主意。我想如果你不关心性能的话这并不太难。

编辑：我花了一整天的时间进行研究，做了很多测试并编写了自己的小例子。这些是我的结果：

选项 1：静态 SVG 滤镜

感谢阿莫里·汉瑟。

您可以定义 svg 过滤器并在 css 中使用它：（请参阅/sf/answers/4663804491/）

这个解决方案在各个方面都很漂亮。

然而，苹果不喜欢你。macOS 和 iOS 上的Safari 不支持某些过滤器或属性。例如：当用作 css 过滤器时，Safari 会忽略 x、y、宽度、高度，这使得大多数解决方案毫无用处。如果您可以控制环境（例如 WebView、Electron...），这是最好的解决方案。

选项 2：动态 SVG 滤镜

计算工作量：每个视口调整大小/页面加载一次

这应该可以跨浏览器工作。在最新的 Safari、Chrome 和 Firefox (macOS) 上进行了测试。您可以使用选项 1 中描述的类似技术。但是，您必须将点阵渲染到屏幕外画布并将其注入 svg 过滤器。每次视口大小发生变化时（例如，在调整大小事件之后），您都必须重新进行计算。

工作codesandbox示例：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>

Run Code Online (Sandbox Code Playgroud)

动态创建并注入 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);
}

Run Code Online (Sandbox Code Playgroud)

页面加载/视口调整大小调用后

pixelate(5, 1); // 5 = tileSize, 1 = std deviation gaussian blur

Run Code Online (Sandbox Code Playgroud)

添加CSS。提示：不要使用display: none;隐藏 svg，因为它会在 Firefox 中损坏

html {
  filter: url(#pixelate);
}

svg {
  position: absolute;
  height: 0;
}

Run Code Online (Sandbox Code Playgroud)

选项 3：覆盖画布

计算工作量：每次 DOM 更改

如果没有可行的示例，我就会这样做：

将页面渲染到 DOM
将页面渲染到画布（请参阅 html2canvas：http://html2canvas.hertzen.com或更好的 rasterizeHTML：https://github.com/cburgmer/rasterizeHTML.js）
覆盖画布position: absolute; left: 0; top: 0; width: 100%; z-index: 100;
不要捕捉画布上的点击，以便下面渲染的 DOM 上的按钮/链接将起作用pointer-events: none;
缩放画布而不进行图像平滑（请参阅此处：如何使用画布和 javascript 对图像进行像素化）

尝试阻止动态重新渲染以获得最佳性能。

选项 4：WebGL 着色器

计算量：每帧

迄今为止最酷的方法是通过 WebGL 渲染您的网站并使用着色器来创建所需的效果。

您可以扩展选项 3，渲染全尺寸画布（请记住为视网膜设备渲染双倍尺寸），获取 WebGl 上下文并附加着色器
或者，您可以使用 HTML GL ( http://htmlgl.com/ )。我不会推荐它，因为它似乎没有维护，也不支持视网膜设备（=>因此一切都会模糊）

Answer 2

Ama*_*ser 6

您可以使用svg 过滤器来实现这一点。

请注意，此解决方案不是跨浏览器的。
正如 @adroste 所说，它不适用于 Safari (Mac/iOS) 或更旧的浏览器。

您需要调整它以使其看起来像您想要的那样，但这里有一个简单的示例：

html { filter: url("#pixelate") }
svg { display: block }
h1 { color: red }
h2 { color: blue}

Run Code Online (Sandbox Code Playgroud)

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0">
  <defs>
    <filter id="pixelate" x="0" y="0">
      <feFlood x="2" y="2" height="1" width="1"/> 
      <feComposite width="5" height="5"/>
      <feTile result="a"/>
      <feComposite in="SourceGraphic" in2="a" 
                   operator="in"/>
      <feMorphology operator="dilate"
                    radius="2.5"/>
    </filter>
  </defs>
</svg>    
<h1>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</h1>
<h2>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, fuga.
</h2>
<p>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus dolorem, maxime recusandae modi adipisci, praesentium qui aliquam consequatur tempore fugiat quasi minus necessitatibus excepturi enim sapiente quibusdam deleniti perferendis quisquam?
</p>

Run Code Online (Sandbox Code Playgroud)

您也许可以使用不同的滤镜来实现这种效果。
您可以在MDN 文档上了解有关 svf 过滤器的更多信息。

归档时间：	4 年，11 月前
查看次数：	2003 次
最近记录：	4 年，11 月前