JSFiddle - React, Tailwind, and code Playground

by PiereDome

HTML

<label>Image File:
<input type="file" id="imageLoader" name="imageLoader"/></label>
<canvas id='canvas'></canvas>
<button id='encode'>Filter</button>
<canvas id='canvas2'></canvas>

CSS

#sprite {
    position: absolute;
    width: 204px;
    height: 4px;
    background-image: linear-gradient(left, red 0px, #eee 204px), linear-gradient(left, #eee 0%, blue 100%);
    background-position: 0 0px, 0 2px;
    background-size: 204px 2px;
    background-repeat: no-repeat;
}

JavaScript

/*
for(y=0;y<height;y++){
	for(x=0;x<width;x++){
		if(img[x]===img[x-1]){
			count+=2;
			continue;
		}else{
			count = 0;
			data += count'px ,' img[x].colorData;
		}
	}
}
position: absolute;
width: image.width;
height: image.height;
background-image: linear-gradient(left, image[i].color 0px, image[i].color pixel.width)...
background-position: 0 0px, 0 pixel.height, ...
background-size: image.width, pixel.height;
background-repeat: no-repeat;
*/

function Hex(number){
    Hex = number.toString(16);
    if(Hex.length<2){
        Hex = '0'+Hex;
    }
    return Hex;
}


function createCSS() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d'),
        width = canvas.width,
        height = canvas.height;
	var frame = ctx.getImageData(0,0,width,height);
    var length = frame.data.length;
    var css = 'background-image: linear-gradient(left';
    var count = 0;
    var prevColor = '';
    for(i=0;i<length;i+=4){
        var pixel = frame.data;
        var color = ((pixel[i]<<16)+(pixel[i+1]<<8)+(pixel[i+2])).toString(16);
        if(color === prevColor){
            count++;
        }else{
            css = css + ', #'+ color+' '+count+'px ';
            prevColor = color;
            count = 0;
        }
        if(i*4 === width){
            css = css + ', #' + color + ' ' + count + 'px), linear-gradient(left,';
            prevColor = '';
            count = 0;
        }
    }
    console.log(css);
}

//button handlers
var encode = document.getElementById('encode');
encode.addEventListener('click', createCSS, false);

//Image Loader
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function(event) {
        var img = new Image();
        img.onload = function() {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
        };
        img.src =...