JSFiddle - React, Tailwind, and code Playground

by Jon Beebe

HTML

<canvas id="photo" width="240" height="120"></canvas>
<div id="px"></div>

CSS

table {
    border: none;
    border-collapse: collapse;
}

td {
    padding: 0;
}

JavaScript

var canvas = document.getElementById('photo');
var context = canvas.getContext('2d');
var imgObj = new Image();

imgObj.src = getImageData();
imgObj.onload = function () {    
    var pixelation = 5;
    context.drawImage(imgObj, 0, 0);
    var pixelData = getPixels(canvas, pixelation);
    canvasToTable(pixelData, document.getElementById('px'));
};

function getPixels(canvas, pixelation) {
    var context = canvas.getContext('2d');
    var w = canvas.width;
    var h = canvas.height;
    var x = 0;
    var y = 0;
    
    var imageData = context.getImageData(x, y, w, h);
    var rawPixels = imageData.data;
    var pixels = [];
    
    for (var dy = 0; dy < h; dy += pixelation) {
        for (var dx = 0; dx < w; dx += pixelation) {
            
            var py = (w * dy);
            var px = dx;
            var index = py + px;
            
            var red = rawPixels[index * 4];
            var green = rawPixels[index * 4 + 1];
            var blue = rawPixels[index * 4 + 2];
            
            pixels.push([red, green, blue]);
        }
    }
    
    return {
        height: h / pixelation,
        width: w / pixelation,
        pixelation: pixelation,
        pixels: pixels   
    };
}

function canvasToTable(data, containerEl) {
    var table = document.createElement('table');
    var tbody = document.createElement('tbody');
    
    var w = data.width;
    var h = data.height;
    var pixelation = data.pixelation;
    var pixels = data.pixels;
    
    table.appendChild(tbody);
    
    for(var dy = 0; dy < h; dy++) {
        var tr = document.createElement('tr');
        for(var dx = 0; dx < w; dx++) {
            var index = dy * w + dx;
            var td = document.createElement('td');
            var pixel = pixels[index];
            var red = pixel[0];
            var green = pixel[1];
            var blue = pixel[2];
            td.style.backgroundColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
            td.style.width = '' +...