How to convert png base 64 to pixel array with out using image.src or image.onload?

Question

I was wondering how to load base64 on sites that have CSPs that don't allow it. Meaning we can't do stuff like:

image.src = "data:image/png;base64..."

So I figured I needed to find a different approach. I tried converting the base64 into a binary string then working from that to get a UintArray containing the pixel image data.

I don't know how to get and image out of the loadImage function, nor do I know what I'm doing wrong when getting the pixel(s).

I know that the conversion from the binary string to the pixel array is wrong, base64 must have some type of way of converting it, that is unknown to most of us.

Here is my code that tries to solve this:

        var canvas = document.getElementById("canvas");

        var imageBase64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAB4CAYAAAC0CXGGAAAD2ElEQVR4Xu1cMWhTURRNXAJ1l8QhlWwBoRahOIlOpS4tNF1cig6CQ4SOGnAQomPADIKD0sWlKbRLSyfFSQJSC0K2YDPY4G6hi7p6z4d7uPxXCfFk+7nvv5/zzrnv3Xvf+ykWgp9er/f771sajUYx2IVpnre/8MPzPhDB5u1PACZeQkjxu/aRUcHd1py5ZoBS90cllPqBqfsTgImTEKMYp8HUAKL9ZyQkAGRlTj1A08/A4eGhG+rMz8/nCYUK0f5xnaEMRB8QRRPtXwBwhCdOQvgDW62Wif/L5bJp0u/3zXW1WnVVNBqNjH1hYcFcj8djc91ut91ogYYSAgB8iAEYkIyEmGSaO29djbduLLn29qd9195duRfyCQHIzFpiIKeEMFrEET45OXE1jPM4NsZ1BO2VSsXtPxxKCACMgBiAhImGEugTGP6y2AglyGIfDA5ZnUkAxACEz8kl1O12TT7w/s0PI+uLV7+Z659fr7jzOGt/+/4lc3+z2cyXDwgA8CEGWD6AAkYJoR19on7nl+sDg70Lxo6ax5uT+4AAiAGrgXAosbu762t8MHDt9XrdtS8vLxt78lhIAMQA8QGWE7Ny+MHBgavxxcVF186KxblzYgEQA/Z4D91ieri/ZjT7oPzEXKPm2Tw/gHUCfeL1+Lnp/9XSlrsuCIAYAKc+dwnhJD57dN18FfWB47nP7rqQ3AcEAGYhMRDNgZ99eWRuQR+YeTzravr0xbGxIwNPr71078ccObMOsCReAMSALTXSUILtiW1ubuZaB9bX113N455ZOB8QABhfjEbFAAoQc+JoGSUaC7H2rE5EnVgAiA+IAVYHQgnhmTjMyKKxEObEeKILfQB9tigAUIkTA3AsMywhDB3Y+Z/UVQnUOJ4EwNgo4wMCQOr/rDL3/zFwc3vVnIVY+37LDAKejcYRwhFlK2u0PZ4v2rr8wfyEogBAnUcMgEbDEsqUDndmzFfYIebE0ZUYMzL0ueOVUzdnzviAAAQrc2KAhdOTVlYJ5wMCkLg";

        canvas.width = 540;
        canvas.height = 360;

        var ctx = canvas.getContext('2d');

        function loadImage(base64)
        {
            var binary_string = window.atob(base64.split(",")[1]);
            var len = binary_string.length;
            var pixels = new Uint8Array(len);

            for (var i = 0; i < len; i++)        
            {
                pixels[i] = binary_string.charCodeAt(i);
            }

            putImageData(ctx, {
                data: pixels,
                width: 100,
                height: 100
            }, 0, 0);



            var img = new Image();
            img.crossOrigin = "Anonymous"; 

            console.log(pixels);

            return img;
        }

        loadImage(imageBase64);

        //ctx.drawImage(loadImage(imageBase64), 0, 0);



        function putImageData(ctx, imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight) 
        {
            var data = imageData.data;
            var height = imageData.height;
            var width = imageData.width;

            dirtyX = dirtyX || 0;
            dirtyY = dirtyY || 0;
            dirtyWidth = dirtyWidth !== undefined ? dirtyWidth : width;
            dirtyHeight = dirtyHeight !== undefined ? dirtyHeight : height;

            var limitBottom = dirtyY + dirtyHeight;
            var limitRight = dirtyX + dirtyWidth;

            for (var y = dirtyY; y < limitBottom; y++) 
            {
                for (var x = dirtyX; x < limitRight; x++) 
                {
                    var pos = y * width + x;
                    ctx.fillStyle = 'rgba(' + data[pos * 4 + 0]
                                    + ',' + data[pos * 4 + 1]
                                    + ',' + data[pos * 4 + 2]
                                    + ',' + (data[pos * 4 + 3] / 255) + ')';
                    ctx.fillRect(x + dx, y + dy, 1, 1);
                }
            }
        }

Maybe if we can find out how the base64 works then we can do it. And with that: Any help would be appreciated :) Thanks!

Answer 1

Code for browserify here generated file (480kB):

var PNG = require('pngjs').PNG;

function getPNG(bin) {
    return PNG.sync.read(bin);
}

function loadImage(base64)
{
    var binary_string = Buffer.from(base64, 'base64');

    var png = getPNG(binary_string);

    return png;
}

window.getPNG = getPNG;
window.loadImage = loadImage;

And snippet demo:

<canvas id=canvas></canvas>
<script src="https://pastebin.com/raw/SN2vwZeg"></script>
<script>
var canvas = document.getElementById("canvas");

var imageBase64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAB4CAYAAAC0CXGGAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMxSURBVHhe7doxaFNRGAXg6KRxlyRD4hpqqUEoTqJTaZcWTBeXoIPgEHcNCArR3TcIDpUsLq3QLi1Z1FECEitiVtshDe52jDbeM/Sd3ub3NtH7cvt/i6cgD6/5T9+9L+9MytHa2tovxD/K5bLzNQ4b9Xpn8efE0gX4Js4bz+ib+jaScbs2g2RIMzzu6+kI+RZeB6QZZePuAJOuryPkW/gdaLfbSHalUgnpZFyvrx1ImvA6wGq1WqwTmUwGyWi1WkhGPp9Hstvd3UUyZmdnkYxer4dk1Ov1of9GHSHfwuuANPPV9ddIdrVr80h29Y9bSHbR0h0kQ+qEjpBv4XWA90Jsb28PyY5nlnGnWDabRbLTvVDShNcBJp0PpL0Rk/Y+0v6f6Qj5Fn4HoiiKdeD9yg8k48Ll70jGz6+XkOykv3/z7kUko1qtagcS7fR1gHEnigt9JLvOZvz/jGeeaQeSLvwO8F5oY2MDya7T6SDZFYtFJLvFxUUkQ/dCSRdeB6QzsfQ8v9lsItnNzc0h2UnfN+iZOGnC78D9rWUk417mEZLBMy/9nuf7BHfiVe8ZkvFyfhXJ0A4kzenrACtsX0UyXDuwM/MJyU47kHThdUA6Az/9/ADJ4A6kHxaQ7Paf7yAZ3IHHV14g2fEZWUfIt/A6wPcB6TuxRqOBZLjeByqVCpIdf2em94GkCb8Drs+BXDsw6nMiHSHfJr8D0nMg7gC/E8dnYte9EJ+J+Z067gDTEfItvA7w3kd6/2fcz4UYv4vBeyMdId8mvwPX396KdWC5ewPJkN7/+dd7IX6/aDX3AcnQEfItvA6wwnoayeCZ5DOx616Iz8TcuZ2lfSQ7HSHfJr8D0nkgac+FmH4Crp/AqNfr9/vF6Wn8MJDuDF9AAsVWpL+FfPvvC+h2u8NL4Eg/Ad90Ab6JCxh36cZt5E+g0XBbYC6XO9jc0O2Wbk6DN6oRoFpFGIhvpv5OFCEc490KAhQXEI7xbRMB+B/MYgsYonH+JKs74LqAw6aGb55SRz5h+pl3T1PCBcVFSiPF4zPqAsbnyPdtMZEwhk/oJYz8l/hLGOdqww/bSimllFJKKaWUi1TqN5LWUoxlg3+MAAAAAElFTkSuQmCC"

var ctx = canvas.getContext('2d');

var png = loadImage(imageBase64.split(",")[1]);

putImageData(ctx, {
        data: png.data,
        width: png.width,
        height: png.height
    }, 0, 0);


function putImageData(ctx, imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight) 
{
    var data = imageData.data;
    var height = imageData.height;
    var width = imageData.width;

    dirtyX = dirtyX || 0;
    dirtyY = dirtyY || 0;
    dirtyWidth = dirtyWidth !== undefined ? dirtyWidth : width;
    dirtyHeight = dirtyHeight !== undefined ? dirtyHeight : height;

    var limitBottom = dirtyY + dirtyHeight;
    var limitRight = dirtyX + dirtyWidth;

    for (var y = dirtyY; y < limitBottom; y++) 
    {
        for (var x = dirtyX; x < limitRight; x++) 
        {
            var pos = y * width + x;
            ctx.fillStyle = 'rgba(' + data[pos * 4 + 0]
                            + ',' + data[pos * 4 + 1]
                            + ',' + data[pos * 4 + 2]
                            + ',' + (data[pos * 4 + 3] / 255) + ')';
            ctx.fillRect(x + dx, y + dy, 1, 1);
        }
    }
}
</script>