JSFiddle - React, Tailwind, and code Playground

by Cardiff

HTML

<img...

CSS

img {
    height: 300px;
    width: 400px;
}

JavaScript

// See: https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
// http://www.html5rocks.com/en/tutorials/canvas/imagefilters/


var style = "sepia";

var canvas = document.createElement("canvas");
var width = 400;
var height = 300;
canvas.width = width;
canvas.height = height;

var ctx = canvas.getContext("2d");
ctx.drawImage($('img').first()[0], 0, 0, 400, 300);

// apply effect
switch(style) {
    case "bw": 
            var imgData = ctx.createImageData(width, height);
            var data = imgData.data;
            var pixels = ctx.getImageData(0, 0, width, height);
            for (var i = 0, ii = pixels.data.length; i < ii; i += 4) {
                var r = pixels.data[i + 0];
                var g =pixels.data[i + 1];
                var b = pixels.data[i + 2];
                var v = 0.2126*r + 0.7152*g + 0.0722*b;
                data[i] = data[i+1] = data[i+2] = v;
                data[i+3] = 255;
            }
            ctx.putImageData(imgData, 0, 0); 
         
/*
       var pixels = ctx.getImageData(0, 0, width, height);
       var d = pixels.data;
          for (var i=0; i<d.length; i+=4) {
            var r = d[i];
            var g = d[i+1];
            var b = d[i+2];
            // CIE luminance for the RGB
            // The human eye is bad at seeing red and blue, so we de-emphasize them.
            var v = 0.2126*r + 0.7152*g + 0.0722*b;
            d[i] = d[i+1] = d[i+2] = v
          }

        // overwrite original image
        ctx.putImageData(d, 0, 0);   */
        break;
    case "sepia":
            var imgData = ctx.createImageData(width, height);
            var data = imgData.data;
            var pixels = ctx.getImageData(0, 0, width, height);
            for (var i = 0, ii = pixels.data.length; i < ii; i += 4) {
                var r = pixels.data[i + 0];
                var g =pixels.data[i + 1];
                var b = pixels.data[i + 2];
                data[i + 0] = (r * .493) + (g *.869) + (b * .189);
...