JSFiddle - React, Tailwind, and code Playground

by PiereDome

HTML

<label>Image File:
<input type="file" id="imageLoader" name="imageLoader"/></label>
<canvas id="origImg"></canvas><br/>
<label>Message<input type='text' id='message' /></label>
<canvas id='newImg'></canvas>
<button id='encode'>Encode</button>

JavaScript

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('origImg');
var newCanv = document.getElementById('newImg');
var newCtx = newCanv.getContext('2d');
var ctx = canvas.getContext('2d');
var encode = document.getElementById('encode');
encode.addEventListener('click', createSten, false);

function applyFilter(type,r,g,b,a){
    if(type === 'greyscale'){
        average = Math.floor((r+g+b)/3);
        red = average;
        blue = average;
        green = average;
        alpha = a;
    }else if(type === 'blueHighlight'){
        if(b-r>0&&b-g>0){
            red = r;
            blue = b;
            green = g;
            alpha = a;
        }else{
            average = Math.floor((r+g+b)/4);
            red = average;
            blue = average;
            green = average;
            alpha = a;
        }
    }else if(type === 'greenHighlight'){
        if(g-b>8&&g-r>8){
            red = r;
            blue = b;
            green = g;
            alpha = a;
        }else{
            average = Math.floor((r+g+b)/4);
            red = average;
            blue = average;
            green = average;
            alpha = a;
        }
    }else if(type === 'redHighlight'){
        if(r-g-b>0){
            red = r;
            blue = b;
            green = g;
            alpha = a;
        }else{
            average = Math.floor((r+g+b)/4);
            red = average;
            blue = average;
            green = average;
            alpha = a;
        }
    }
    return {r: red, g: green, b: blue,a: alpha};
}

function createSten() {
    newCanv.width = canvas.width;
    newCanv.height = canvas.height;
    frame = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var l = frame.data.length / 4;
    for (i = 0; i < l; i++) {
        r = frame.data[i * 4];
        g = frame.data[i * 4 + 1];
        b = frame.data[i * 4 + 2];
        a = frame.data[i * 4 +...