JSFiddle - React, Tailwind, and code Playground

HTML

<body><table><td>
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>
<img id="paletteFile" width="256" height="256" style="display: none" title="" alt=""...

JavaScript

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 codedImage;

}


function repalette () {

	var time1 = Date.now();
	
	if (ArrayMode.checked) {
		var imageColors = indexColorsAlt(ImageCanvas);
		var paletteColors = indexColorsAlt(Palette);
		
		correspondColors(imageColors, paletteColors);
		replacePaletteAlt(imageColors, ImageCanvas);
		var time2 = Date.now() - time1;
		ArrayCompletion.innerHTML = time2;
	}
	else {
		var imageColors = indexColors(ImageCanvas);
		var paletteColors = indexColors(Palette);
		
		correspondColors(imageColors, paletteColors);
		replacePalette(imageColors, ImageCanvas);
		var time2 = Date.now() -...