JSFiddle - React, Tailwind, and code Playground

by atesgoral

HTML

<canvas id="canvas" width="" height=""></canvas>

JavaScript

const sprites = new Image();
sprites.src = 'data:image/gif;base64,R0lGODlhIAAQAPEDAAAAAF9fX9BAAP///yH5BAAAAAAALAAAAAAgABAAAAKMjG8AoswwoppUISSehmGIQQXWCCTlEjiiN3SSdcBlkjoZ6qURKNIl3ynZbAeBizc7XWIpFCNVDM5My6JRlDFkXRPT9DI0fqGgL2y5yGbE4JOkVxWv4TPjoyUVJYXNJvsy8ZLEJKRyNdal9zPD47DwyOT14XEGpuGI1qA5VoTy2OU5scGZsPEgE1gmUQAAIf8LWE1QIERhdGFYTVA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/Pgo8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzEzOCA3OS4xNTk4MjQsIDIwMTYvMDkvMTQtMDE6MDk6MDEgICAgICAgICI+CiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiLz4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cjw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAA7';

canvas.width = sprites.width;
canvas.height = sprites.height;

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

ctx.drawImage(sprites, 0, 0);

const w = 8;
const h = 16;

const cnt = sprites.width / w;

const pal = {};

for (var i = 0; i < cnt; i++) {
	const img = ctx.getImageData(i * w, 0, w, h);
  
  for (var y = 0; y < h; y++) {
  	for (var x = 0; x < w; x++) {
      const offs = (y * w + x) * 4;
      const rgb = img.data
      	.slice(offs, offs + 3)
        .reduce((val, comp) => (val << 8) + comp, 1)
        .toString(16)
        .slice(1);
      pal[rgb] = true;
    }
  }
}