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>

JavaScript

function Hex(number){
    var color = number.toString(16);
    while(color.length<6){
        color = '0'+color;
    }
    return color;
}

function boxShadow(frame, name) {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d'),
        width = canvas.width,
        height = canvas.height,
        count = 0,
        prevColor = '0';
    var frame = ctx.getImageData(0, 0, width, height);
    var length = frame.data.length;
    name = name || 'sprite2';
    css = '.' + name + '{height: 1px;\nwidth: 1px;\nbox-shadow: ';
    for (i = 0; i < frame.data.length; i += 4) {
        var pixel = frame.data;
        var color = Hex((pixel[i] << 16) + (pixel[i + 1] << 8) + (pixel[i + 2]));
        css = css + count%width + 'px ' + Math.floor(i / (width * 4)) + 'px #' + color;
        if (i === length - 4) {
            css += ';';
        } else {
            css += ', ';
        }
        count++;
    }
    css+= '\n}';
    console.log(css);
}


function linearGradient(frame, name) {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d'),
        width = canvas.width,
        height = canvas.height,
        count = 0,
        prevColor = '0';
    var frame = ctx.getImageData(0, 0, width, height);
    var length = frame.data.length;
    name = name || 'sprite1';
    css = '.'+name+'{\n height: ' + height + 'px;\n width: ' + width + 'px;\n background-size: ' + width + 'px 1px;\n background-repeat: no-repeat;\n';
    css += 'background-image: linear-gradient(left, #0 0px';
    for (i = 0; i < frame.data.length; i += 4) {
        var pixel = frame.data;
        var color = Hex((pixel[i] << 16) + (pixel[i + 1] << 8) + (pixel[i + 2]));
        if (color !== prevColor) {
            if (count === 0) {
                css = css + ', #' + color + ' 0px';
            } else {
                css = css + ', #' + prevColor + ' ' + count + 'px, #' + color + ' ' + count + 'px';
            }
            prevColor =...