added censor.js

README.md

@@ -60,6 +60,8 @@ Add a piano to any webpage.
 
 If you want shorter code for some reason, replace the big `disc:[[],[{ ... timeout:null}]]` block with `disc:[[]]`. This deletes the sample tracks.
 
+![piano](gif/piano.gif)
+
 Left Menu:
 
 - Wave: waveform type
@@ -81,8 +83,6 @@ Right Menu:
   - search console output for the track (disc) you want to save and paste it at the end of `piano.disc` list in the script
   - only useful with a local copy of the source code (e.g. me and pull requesters)
 
-![piano](gif/piano.gif)
-
 ## [Mouselight.js](min/mouselight.min.js)
 
 Simulate a flashlight. Works best on websites with deeply nested HTML elements.
@@ -105,6 +105,24 @@ A replicated memory game. See **Lu**mosity's [**pi**nball **re**call](https://lu
 
 ![lupire](gif/lupire.gif)
 
+## [Censor.js](min/censor.min.js)
+
+Pixelates all visible img and video elements. Uncensors on hover.
+
+![censor](gif/censor.gif)
+
+Very buggy. Issues include:
+
+- most lazy-loaded images won't load at all
+- may not update to style changes of img or video
+- doesn't work for iframes
+- GIFs only show the first frame
+- layout shifts
+- will shrink or stretch if img or video doesn't fill its space
+- hovering doesn't always uncensor
+
+Instead of fixing these, I made the bookmarklet togglable. Click twice to reset the censors. (This fixes the first two issues only).
+
 # YouTube Tools
 
 These bookmarklets are specifically for YouTube. They're written for desktop, but they should work on the mobile website too.

censor.js

@@ -0,0 +1,118 @@
+javascript:
+var style = document.createElement("style");
+style.innerHTML = `.censor {
+    opacity: 1 !important;
+    image-rendering: pixelated !important;
+}
+.censor + img {
+    display: none !important;
+}
+.censor + video {
+    visibility: hidden !important;
+}
+.censor-parent:hover .censor {
+    display: none !important;
+}
+.censor-parent:hover .censor + img {
+    display: unset !important;
+}
+.censor-parent:hover .censor + video {
+    visibility: visible !important;
+}`;
+var sensed;
+var censors;
+var af;
+var quality = 3; /* higher = more pixels */
+
+function onScreen(r) {
+    return r.right > 0 && r.bottom > 0 && r.left < innerWidth && r.top < innerHeight;
+}
+
+function copyStyle(donor, recipient, sizeOnly) {
+    var donorStyle = getComputedStyle(donor);
+    var keys = Object.keys(donorStyle);
+    if (sizeOnly) {
+        keys = ["width", "height"];
+    }
+    for (var key of keys) {
+        recipient.style[key] = donorStyle[key];
+    }
+}
+
+function updateCensor(e, canvas) {
+    var rect = e.getBoundingClientRect();
+    if (onScreen(rect)) {
+        var equalizer = Math.log2(Math.max(rect.width * rect.height, 2));
+        canvas.width = rect.width * quality / equalizer;
+        canvas.height = rect.height * quality / equalizer;
+        if (af % 120 == 0) { /* delay because expensive */
+            copyStyle(e, canvas, true);
+        }
+
+        var context = canvas.getContext("2d");
+        context.drawImage(e, 0, 0, canvas.width, canvas.height);
+        return canvas;
+    }
+}
+
+function createCensor(e) {
+    var rect = e.getBoundingClientRect();
+    if (onScreen(rect)) {
+        var canvas = document.createElement("canvas");
+        canvas.className = "censor";
+
+        var equalizer = Math.log2(Math.max(rect.width * rect.height, 2));
+        canvas.width = rect.width * quality / equalizer;
+        canvas.height = rect.height * quality / equalizer;
+        copyStyle(e, canvas);
+
+        var context = canvas.getContext("2d");
+        context.drawImage(e, 0, 0, canvas.width, canvas.height);
+
+        e.parentElement.insertBefore(canvas, e);
+        e.parentElement.classList.add("censor-parent");
+
+        return canvas;
+    }
+}
+
+function sense() {
+    var es = document.querySelectorAll("img,video");
+    for (var e of es) {
+        var i = sensed.indexOf(e);
+        if (i >= 0) {
+            if (e.tagName == "VIDEO" && !e.paused) {
+                updateCensor(e, censors[i]);
+            }
+        }
+        else {
+            if (e.tagName == "VIDEO" || e.complete) {
+                var c = createCensor(e);
+                if (c) {
+                    censors.push(c);
+                    sensed.push(e);
+                }
+            }
+        }
+    }
+    af = requestAnimationFrame(sense);
+    /* af = requestAnimationFrame(z => setTimeout(sense, 60)); */
+}
+
+if (af) {
+    cancelAnimationFrame(af);
+    af = 0;
+    for (var c of censors) {
+        c.remove();
+    }
+    for (var e of sensed) {
+        e.parentElement.classList.remove("censor-parent");
+    }
+    style.remove();
+}
+else {
+    document.body.appendChild(style);
+    sensed = [];
+    censors = [];
+    sense();
+}