JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<img id="magic-eye" width="500" height="400" src />

JavaScript

/*! MagicEye.js (https://github.com/peeinears/MagicEye.js)
 *
 *  MIT License (http://www.opensource.org/licenses/mit-license.html)
 *  Copyright (c) 2014 Ian Pearce
 */
!function(){"use strict";var a={render:function(b){b=b||{};var c={width:null,height:null,depthMap:null,depthMapper:new a.DepthMapper,imageType:"png",colors:[[255,255,255,255],[0,0,0,255]]};for(var d in c)b[d]=b&&b[d]?b[d]:c[d];var e,f,g,h,i,j;if(b.el&&(e="string"==typeof b.el?document.getElementById(b.el):b.el,!e||!e.tagName))throw"MagicEye: Could not find element: "+b.el;if(f=b.width||e.width,!f)throw"MagicEye: width not set and could not be inferred from element: "+b.el;if(g=b.height||e.height,!g)throw"MagicEye: height not set and could not be inferred from element: "+b.el;if(b.depthMap)h=b.depthMap;else{if(!b.depthMapper)throw"MagicEye: no depthMap or depthMapper opts given";h=b.depthMapper.generate(f,g)}for(j=0;j<b.colors.length;j++)"string"==typeof b.colors[j]&&(b.colors[j]=this.helpers.hexToRGBa(b.colors[j]));switch(i=this.generatePixelData({width:f,height:g,depthMap:h,colors:b.colors}),e.tagName){case"CANVAS":this.renderToCanvas(e,i,f,g);break;case"IMG":var k=document.createElement("canvas");k.width=f,k.height=g,this.renderToCanvas(k,i,f,g),e.src=k.toDataURL("image/"+(b.imageType||"png"));break;default:throw"MagicEye: el must be either a <canvas> or an <img>"}return this},renderToCanvas:function(a,b,c,d){var e=a.getContext("2d"),f=e.createImageData(c,d);f.data.set(b),e.putImageData(f,0,0)},generatePixelData:function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p=a.width,q=a.height,r=a.depthMap,s=a.colors.length,t=72,u=Math.round(2.5*t),v=1/3,w=new Uint8ClampedArray(p*q*4);for(c=0;q>c;c++){for(o=new Uint16Array(p),b=0;p>b;b++)o[b]=b;for(b=0;p>b;b++)if(l=r[c][b],k=Math.round((1-v*l)*u/(2-v*l)),e=Math.round(b-(k+(k&c&1))/2),f=e+k,e>=0&&p>f){h=1;do...