Pixelating Reside with SVG – Eric’s Archived Ideas
For causes I’m not going to get into right here, I need have the ability to pixelate net pages, and even components of net pages, totally from the shopper facet. I’m utilizing ViolentMonkey to inject scripts into pages, because it lets me simply open the ViolentMonkey browser-toolbar menu and toggle scripts on or off at will.
I’m conscious I may take raster screenshots of pages after which manipulate them in a picture editor. I don’t need to do this, although — I wish to pixelate stay. For causes.
As far as I’m conscious, my solely possibility right here is to use SVG filters by the use of CSS. The issue I’m working into is that I can’t determine the right way to assemble an SVG filter that may precisely:
- Divide the aspect into cells; for instance, a grid of 4×4 cells
- Discover the common coloration of the pixels in every cell
- Flood-fill every cell with the common coloration of its pixels
As a approach of understanding the supposed outcome, see the next screenshot of Wikipedia’s dwelling web page, after which the corresponding pixelated model, which I generated utilizing the Pixelate filter in Acorn.
See how the textual content is rendered out? That’s key right here.
I discovered a few SVG pixelators in a StackOverflow post, however what they each seem to do is pattern pixels at regularly-spaced intervals, then dilate them. This works fairly okay for issues like pictures, nevertheless it falls down exhausting in relation to textual content, and even photographs of diagrams. Textual content is sort of totally vanished, as proven right here.
I attempted Gaussian blurring at the start of my filters in an try to beat this, however that principally washed the colours out, and didn’t make the textual content extra clearly textual content, so it was a web loss. I messed round with dilation radii, and there was no pleasure there. I did discover some attention-grabbing results alongside the way in which, however none of them had been what I used to be after.
I’ve been studying by means of varied tutorials and MDN pages about SVG filters, and I’m unable to determine this out. Although I could also be fallacious, I really feel just like the color-averaging step is the sticking level right here, because it looks like <feTile> and <feFlood> ought to have the ability to deal with the primary and final steps. I’ve questioned if there’s a method to get a convolve matrix to do the color-averaging half, however I do not know — I by no means discovered matrix math, and later-life makes an attempt to determine it out have solely gotten me so far as greedy probably the most basic of ideas. I’ve additionally tried to work out if a displacement map could possibly be of assist right here, however as far as I can inform, no. However possibly I simply don’t perceive them properly sufficient to inform?
It additionally occurred to me, as I used to be ready to publish this, that possibly an answer can be to make use of some type of operation (a matrix, possibly?) to downsize the picture after which use one other operation to upsize it to the unique dimension. So to pixelfy a 1200×1200 picture into 10×10 blocks, easily downsize it to 120×120 after which nearest-neighbor it again as much as 1200×1200. That appears like it will make sense as a method, however as soon as once more, even when it does make sense I can’t determine the right way to do it. I looked for phrases like picture scale rework matrix however I both didn’t get good outcomes, or didn’t perceive them after I did. In all probability the latter, if we’re being trustworthy.
So, when you have any concepts for the right way to make this work, I’m all ears — both right here within the feedback, by yourself website, or as forks of the Codepen I set up for exactly that purpose. My thanks for any assist!