JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head><title>Repaletter</title>

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />




</head>

<body><table><td>
<table><tr><td>Image <input id="ImageFile" type="file" onchange="loadImage(this.files)"></td></tr>
<tr><td>Palette <input type="file" onchange="loadPalette(this.files)"></td></tr></table>

View:<input id="CanvasPortWidth" size=1 value=240 onchange="CanvasPort.style.width = this.value + 'px'"
>x<input id="CanvasPortHeight" size=1 value=240 onchange="CanvasPort.style.height = this.value + 'px'">
Palette View:<input id="PalettePortWidth" size=1 value=240 onchange="PalettePort.style.width = this.value + 'px'"
>x<input id="PalettePortHeight" size=1 value=240 onchange="PalettePort.style.height = this.value + 'px'">
<br>
<input id="RepaletteButton" type="button" value="Repalette" onclick="repalette();">
Array<input id="ArrayMode" type="radio" name="Mode" checked> 2D Obj array<input id="ObjMode" type="radio" name="Mode">
</div>
<table><tr><td>
<div id="CanvasPort" width=240 height=240 style="border-style: ridge; width: 240px; height: 240px; overflow: auto; position: relative">
<div id="CanvasContainer" style="border-style: solid; border-width: 1px; width: 240px; height: 240px;">
<canvas id="ImageCanvas" width=0 height=0 style="position: absolute; z-index: 0"></canvas>
</td><td>
<div id="PalettePort" width=480 height=480 style="width: 480px; height: 240px; overflow: auto; position: relative"
><div id="PaletteContainer" style="border-style: solid; border-width: 1px"><canvas id="Palette" width=0 height=0 style="position: absolute; top: 0px; left: 0px"></canvas></div></div>
</td></tr></table>
<br>

Completion Time<br>
Array of RGBA components - <span id="ArrayCompletion">__</span> ms<br>
2D Array of RGBA objects - <span id="ObjCompletion">__</span> ms

<script>

ImageCanvas.context =  ImageCanvas.getContext("2d");

imgFile = new Image();
paletteFile = new Image();

Palette.context =...

JavaScript

function loadImage (files) {

    imgFile.onload = function () {
        
        ImageCanvas.width = imgFile.naturalWidth;
        ImageCanvas.height = imgFile.naturalHeight;
        ImageCanvas.context.drawImage(imgFile, 0, 0);
    };

    imgFile.src = window.URL.createObjectURL(files[0]);
}



function loadPalette (files) {

    paletteFile.onload = function () {
        Palette.width = paletteFile.naturalWidth;
        Palette.height = paletteFile.naturalHeight;
        Palette.context.drawImage(paletteFile, 0, 0);
    };

    paletteFile.src = window.URL.createObjectURL(files[0]);
}




function arrangeImageData (target) {

    var imageCapture = target.context.getImageData(0, 0, target.width, target.height);
    var imageData = {
		data: []
	};
    imageData.data[0] = [];
    var x = 0;
    var y = 0;
    var imageLimit = imageCapture.data.length;
    
    for (var index = 0; index < imageLimit; index += 4) {
    
        if (x == target.width) {
            y++;
            imageData.data[y] = [];
            x = 0;
        }
        
        imageData.data[y][x] = {
            red: imageCapture.data[index],
            green: imageCapture.data[index + 1],
            blue: imageCapture.data[index + 2],
            alpha: imageCapture.data[index + 3]
        };
        x++;
    }
    return imageData;
    
}


function codifyImageData (target, data) {

	var imageData = data.data;

    var index = 0;
    var codedImage = target.context.createImageData(target.width, target.height);
	
    for (var y = 0; y < target.height; y++) {
    
        for (var x = 0; x < target.width; x++) {
        
            codedImage.data[index] = imageData[y][x].red;
            index++;
            codedImage.data[index] = imageData[y][x].green;
            index++;
            codedImage.data[index] = imageData[y][x].blue;
            index++;
            codedImage.data[index] = imageData[y][x].alpha;
            index++;
        }
        
    }
    
    return...