JPEG Degrader Bake an image by recursively running JPEG compression on it (with filters).

Visit Site ↗ Project Source

Mar 20-Apr 2, 2018

Results

Summary

This project is a fun way to “bake” an image by recursively running JPEG compression on it (with filters) to create interesting effects.

Goals

My initial goal was to algorithmically take a jpeg and then compress it, and then compress it again and again while recording the process. I continued to play with it until I discovered that rotating the hue on each iteration caused the JPEG artifacts to behave like Conway’s Game of Life, or a reaction-diffusion system.

Solution

There’s 3 parts to this:

1. Draw something to an HTML canvas.
2. Generate a degraded JPEG image from the canvas.
3. Copy the degraded image back to the canvas.
4. Go to step 2.

With each iteration, we’ll get a more degraded image.

Suppose a setup like this:

<canvas id="canvas"></canvas>
<img id="img" />
<script>
  const $canvas = document.getElementById("canvas");
  const ctx = $canvas.getContext("2d");
  const $img = document.getElementById("img");
</script>

We convert the canvas to an image like this:

$img.src = canvas.toDataURL("image/jpeg", 80);

And we draw the image back onto the canvas like so:

ctx.drawImage($img, 0, 0);

Do this enough times and we “bake” our image.

Because the browser APIs don’t have an option to provide sharpness, you won’t get the exact same effect. However, with a few modifications and tweaks, we can get some nice effects.

Add a few more tweaks and filters, and you get this:

I used ezgif to shrink the GIFs and to further refine them (cropping, removing frames, looping, etc).

Stack