JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<a><img id="imgSet" class="color"></a>
<a><img id="imgSet1" class="color1"></a>
<a><img id="imgSet2" class="color2"></a>
<a><img id="imgSet3" class="color3"></a>
<script>
  //http://www.kawa.net/works/js/data-scheme/base64.html
var data = 'data:image/jpeg;base64,'+
    '/9j/4AAQSkZJRgABAgAAAQABAAD//gAEKgD/4gv4SUNDX1BST0ZJTEUAAQEAAAvoAAAAAAIAAABt'+
    'bnRyUkdCIFhZWiAH2QADABsAFQAkAB9hY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAA'+
    '9tYAAQAAAADTLQAAAAAp+D3er/JVrnhC+uTKgzkNAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
    'AAAAABBkZXNjAAABRAAAAHliWFlaAAABwAAAABRiVFJDAAAB1AAACAxkbWRkAAAJ4AAAAIhnWFla'+
    'AAAKaAAAABRnVFJDAAAB1AAACAxsdW1pAAAKfAAAABRtZWFzAAAKkAAAACRia3B0AAAKtAAAABRy'+
    'WFlaAAAKyAAAABRyVFJDAAAB1AAACAx0ZWNoAAAK3AAAAAx2dWVkAAAK6AAAAId3dHB0AAALcAAA'+
    'ABRjcHJ0AAALhAAAADdjaGFkAAALvAAAACxkZXNjAAAAAAAAAB9zUkdCIElFQzYxOTY2LTItMSBi'+
    'bGFjayBzY2FsZWQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
    'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAACSgAAAPhAAAts9j'+
    'dXJ2AAAAAAAABAAAAAAFAAoADwAUABkAHgAjACgALQAyADcAOwBAAEUASgBPAFQAWQBeAGMAaABt'+
    'AHIAdwB8AIEAhgCLAJAAlQCaAJ8ApACpAK4AsgC3ALwAwQDGAMsA0ADVANsA4ADlAOsA8AD2APsB'+
    'AQEHAQ0BEwEZAR8BJQErATIBOAE+AUUBTAFSAVkBYAFnAW4BdQF8AYMBiwGSAZoBoQGpAbEBuQHB'+
    'AckB0QHZAeEB6QHyAfoCAwIMAhQCHQImAi8COAJBAksCVAJdAmcCcQJ6AoQCjgKYAqICrAK2AsEC'+
    'ywLVAuAC6wL1AwADCwMWAyEDLQM4A0MDTwNaA2YDcgN+A4oDlgOiA64DugPHA9MD4APsA/kEBgQT'+
    'BCAELQQ7BEgEVQRjBHEEfgSMBJoEqAS2BMQE0wThBPAE/gUNBRwFKwU6BUkFWAVnBXcFhgWWBaYF'+
    'tQXFBdUF5QX2BgYGFgYnBjcGSAZZBmoGewaMBp0GrwbABtEG4wb1BwcHGQcrBz0HTwdhB3QHhgeZ'+
    'B6wHvwfSB+UH+AgLCB8IMghGCFoIbgiCCJYIqgi+CNII5wj7CRAJJQk6CU8JZAl5CY8JpAm6Cc8J'+
    '5Qn7ChEKJwo9ClQKagqBCpgKrgrFCtwK8wsLCyILOQtRC2kLgAuYC7ALyAvhC/kMEgwqDEMMXAx1'+
    'DI4MpwzADNkM8w0NDSYNQA1aDXQNjg2pDcMN3g34DhMOLg5JDmQOfw6bDrYO0g7uDwkPJQ9BD14P'+
    'eg+WD7MPzw/sEAkQJhBDEGEQfhCbELkQ1xD1ERMRMRFPEW0RjBGqEckR6BIHEiYSRRJkEoQSoxLD'+
   ...

CSS

body { background-color: #DDDDDD; font: 30px sans-serif; }
a{float:left; display:inline-block; margin-bottom:20px;}

JavaScript

(function($,window,undefined) {
  var isIE8 = /MSIE ([0-9]{1,}[\.0-9]{0,})/i.test(navigator.userAgent);
  
  //------------------------------
  //  OPTION
  //------------------------------
  var hoverColorOption = {
    enable        : true,
    selector      : 'img.color',
    time        : 400,
    defaultAlpha    : '0',
    overAlpha      : '1',
    color        : 'monochro',
    isTouch        : true
  }
  
  
  //------------------------------
  //  PLUGIN
  //------------------------------
  // hoverColor
  $.fn.hoverColor = function(param){
    var op = hoverColorOption;
    if(param) op = $.extend({}, op, param);
    $(this).each(function(){
      var element = $(this);
      if(!isIE8){
        var canvas = document.createElement('canvas'), ctx, pixels, w, h, l, color = [], gray, i, rgb = [];
        switch(op.color) {
          case 'monochro':
            color = [1, 1, 1];
          break;
          case 'sepia':
            color = [0.9, 0.7, 0.4];
          break;
          default:
            rgb = HEX2RGB(op.color);
            color = [rgb[0]/255, rgb[1]/255, rgb[2]/255];
          break;
        };
        element.after(canvas);
          
        $(window).load(function(){
          console.log('test');
          ctx = canvas.getContext("2d");
          w = element.width();
          h = element.height();
          element.parent().css({'width':parseInt(w)+'px','height':parseInt(h)+'px'});
          $(canvas).attr({'width':w,'height':h, 'style':'position:absolute; top:0; left:0;'});
          console
          $(canvas).fadeTo(0, op.defaultAlpha);
          ctx.drawImage(element[0], 0, 0);
          pixels = ctx.getImageData(0, 0, w, h);
          l = pixels.data.length;
          for(i=0; i<l; i+=4) {
            // NTSC Grayscale R*0.298912 + G*0.586611 + B*0.114478
            rgb = [pixels.data[i + 0], pixels.data[i + 1], pixels.data[i + 2]];
            gray = rgb[0]*0.299 + rgb[1]*0.587 + rgb[2]*0.114;
            pixels.data[i + 0] =...