EPX/Scale2x in JavaScript

This is an implementation of EPX/Scale2x in JavaScript. The algorithm has been described in detail elsewhere, so I won't explain it here.

Why did you make this?

Originally, it was for a quiz app that we built as a team project for database class. Students would join the quiz by scanning a QR code that we displayed on a projector at the front of the room. Once the quiz started, students answered questions on their phones and the projector showed a leaderboard. (Of course, this was a totally novel idea that nobody had done before.)

Nice-looking apps are more fun to use, and historically I haven't been good at making apps look nice, so I made it my goal to make the app visually appealing. We had confetti and border-radius powered squishy shapes, but I wanted to make the initial QR code look cool as well. I had previously discovered that Inkscape's pixel art tracing feature makes QR codes look interesting while leaving them readable (see below), so I thought I would run the quiz app's QR code through a pixel-art scaling algorithm.

(This one works; try it!)

I tested several pixel art scaling algorithms and chose EPX because it produced the nicest-looking results. I implemented EPX in JavaScript and attached it to a QR code encoder. It was at that point that I discovered that EPX-scaled QR codes are completely unreadable (try the one below). We scrapped the EPX idea and used regular blocky QR codes in our app.

(Good luck scanning this!)

Can I use it?

The code is available under CC0. If you just want to scale an image file, you can drag and drop it onto this page or open it with the file input below. (No data leaves your computer.)

Examples

Name Image EPX(Image)
marshmallow.png
conway's game of life.png

Published 2020-01-09

Previous: Falling leaves