https://meyerweb.com/eric/thoughts/2023/12/21/pixelating-live-with-svg/ meyerweb.com Main content Navigation links Footer * Post Archives * CSS Work * Toolbox * Writing * Speaking * Other Stuff * About this site Pixelating Live with SVG Published 3 days past For reasons I'm not going to get into here, I want be able to pixelate web pages, or even parts of web pages, entirely from the client side. I'm using ViolentMonkey to inject scripts into pages, since it lets me easily open the ViolentMonkey browser-toolbar menu and toggle scripts on or off at will. I'm aware I could take raster screenshots of pages and then manipulate them in an image editor. I don't want to do that, though -- I want to pixelate live. For reasons. So far as I'm aware, my only option here is to apply SVG filters by way of CSS. The problem I'm running into is that I can't figure out how to construct an SVG filter that will exactly: * Divide the element into cells; for example, a grid of 4x4 cells * Find the average color of the pixels in each cell * Flood-fill each cell with the average color of its pixels As a way of understanding the intended result, see the following screenshot of Wikipedia's home page, and then the corresponding pixelated version, which I generated using the Pixelate filter in Acorn. [wikipedia-] [wikipedia-] Wikipedia in the raw, and blockified. See how the text is rendered out? That's key here. I found a couple of SVG pixelators in a StackOverflow post, but what they both appear to do is sample pixels at regularly-spaced intervals, then dilate them. This works pretty okay for things like photographs, but it falls down hard when it comes to text, or even images of diagrams. Text is almost entirely vanished, as shown here. [wikipedia-] The text was there a minute ago, I swear it. I tried Gaussian blurring at the beginning of my filters in an attempt to overcome this, but that mostly washed the colors out, and didn't make the text more obviously text, so it was a net loss. I messed around with dilation radii, and there was no joy there. I did find some interesting effects along the way, but none of them were what I was after. I've been reading through various tutorials and MDN pages about SVG filters, and I'm unable to figure this out. Though I may be wrong, I feel like the color-averaging step is the sticking point here, since it seems like and should be able to handle the first and last steps. I've wondered if there's a way to get a convolve matrix to do the color-averaging part, but I have no idea -- I never learned matrix math, and later-life attempts to figure it out have only gotten me as far as grasping the most general of principles. I've also tried to work out if a displacement map could be of help here, but so far as I can tell, no. But maybe I just don't understand them well enough to tell? It also occurred to me, as I was prepared to publish this, that maybe a solution would be to use some kind of operation (a matrix, maybe?) to downsize the image and then use another operation to upsize it to the original size. So to pixelfy a 1200x1200 image into 10x10 blocks, smoothly downsize it to 120x120 and then nearest-neighbor it back up to 1200x1200. That feels like it would make sense as a technique, but once again, even if it does make sense I can't figure out how to do it. I searched for terms like image scale transform matrix but I either didn't get good results, or didn't understand them when I did. Probably the latter, if we're being honest. So, if you have any ideas for how to make this work, I'm all ears -- either here in the comments, on your own site, or as forks of the Codepen I set up for exactly that purpose. My thanks for any help! * Pixelating Live with SVG was published on Thursday, December 21st, 2023. * It was assigned to the SVG category. * There have been two replies. --------------------------------------------------------------------- Comments (2) 1. It seems that "fill each 4x4 cell with the average of its pixels" is a blending of 16 "fill each cell with its top-left" (the thing you mention as 'a couple of SVG pixelators'), at 16 different offsets. Can you make something like that work? If the pixelator doesn't naturally support an offset, it can be hacked in by translating the input, pixelating, then translating it back. One thing that looks tricky at first is how to blend them, but at a minimum, you could use opacities of 100%, 50%, 1/3, 1/4, 1/5, ..., 1/16, back to front, and that should get you something with equal weight to reach layer. Signed, Ross Thursday, December 21st, 2023 2:08pm 2. (guy who thought an 8x8 adaptive quality JPEG compressor and SQIP vector LQIPs were good ideas to built - so take the following with lots of salt...) SQIP could probably be made to do this. But you could even go more barebones & slice the screenshot into desired block sizes (e.g. 8x8 like JPEG uses), then calculate the Mean color of each slice and then glue them back together again in order. I've abused the same nasty approach in "Adapt". All of this can be done with ImageMagick/GM. And if it still needs to be a vector afterwards, potrace+svgo or SQIP/Primitive will convert the raster to vector successfully. Signed, Tobias Thursday, December 21st, 2023 2:32pm Add Your Thoughts * Trackback URL * Comments RSS feed' Name [ ] E-mail (required but not displayed) [ ] URI (optional) [ ] Meyerweb dot com reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand. HTML allowed: 
 

---------------------------------------------------------------------
Your Comment (Markdown supported) 
[                                                                      ]
[                                                                      ]
[                                                                      ]
[                                                                      ]
[                                                                      ]
[                                                                      ]
[                                                                      ]
[                                                                      ]
[                                                                      ]
[                                                                      ]

[Post your e-pistle] if you're satisfied with it.

Comment Preview

 [                                             ] 
 [                                             ] 
 [                                             ] 
 [                                             ] 
 [                                             ] 
 [                                             ] 
 [                                             ] 
D[                                             ] 

Browse the Archive

Three Decades of HTML

Related Posts

Browse posts in the SVG category.

Feeds

A dispatch of all posts to "Thoughts From Eric" is available in both
RSS 2.0 and Atom.

Identity Archipelago

  * Twitter
  * Mastodon
  * GitHub
  * Flickr
  * Dribbble
  * Facebook
  * LinkedIn

The excuse of the day is

peak oil

All contents of this site, unless otherwise noted, are (c)1993-2023
Eric A. and Kathryn S. Meyer. All Rights Reserved.
"Thoughts From Eric" is powered by WordPress. Most of the rest of the
site is hand-authored.
The ink-sketch images used in this site's design are adapted from
Yuzan Mori's Hamonshu, Volumes 1-3, published in 1903 and made
available for public use by the Smithsonian Libraries and the
Internet Archive.