XbrWasm

XbrWasm is a JavaScript library that leverages in-browser native code with background threading to perform real-time pixel art upscaling. To achieve this, it makes heavy use of WebAssembly and Web Workers. It uses the xbr scaling algorithm.

XbrWasm is free for noncommercial use and select commercial use, and can be purchased for other commercial uses, subject to the license agreement.

See also: Online XBR Pixel Art Upscaler to upscale pixel art in the browser, and Pixelated.js for a JS library to automatically scale images on a web page.

Download XbrWasm

Real-time Video Live Demo

Original: 256x220

Upscaled: 1024x880

(Note: May not work with some mobile browsers. Other mobile browsers will pause the above video element if it scrolls off-screen, thus pausing the upscaled video.)

Real-Time Video Code

<script src="XbrWasm.js"></script>
<script>
    const currentScript = document.currentScript;
    function setup() {
        XbrWasm.ready.then(() => {
            let xbrwasm = new XbrWasm(myvid, 3); // Scaling factor of 3
            currentScript.parentNode.insertBefore(
                xbrwasm.destCanvas,
                currentScript
            );
            function drawFrame() {
                xbrwasm.draw();
                requestAnimationFrame(drawFrame);
            }
            drawFrame();
        });
    }
    if (myvid.readyState >= 2) setup();
    else myvid.addEventListener("loadeddata", setup);
</script>

Still Images Live Demo

Originals: 256x224

Super Mario World Screenshot Super Mario All-Stars Title Screen

Upscaled: 1024x896

Still Images Code

<script src="XbrWasm.js"></script>
<script>
    const currentScript = document.currentScript;
    const imgs = document.querySelectorAll('.xbrscale');

    function setup(img) {
        let xbrwasm = new XbrWasm(img, 4); // Scaling factor of 4
        currentScript.parentNode.insertBefore(
            xbrwasm.destCanvas,
            currentScript
        );

        XbrWasm.ready.then(() => {
            xbrwasm.draw();
        });
    }

    imgs.forEach((img) => {
        if (img.complete) setup(img);
        else {
            img.onload = () => setup(img);
        }
    });
</script>

Disclaimers

The imagery on this page is copyright (c) Nintendo, and is used solely for demonstration purposes.