JSFiddle - React, Tailwind, and code Playground

by Cheng Long Xiao

HTML

<div id="tip-container">Ohh, we're only accept Image type file.</div>
<div id="src-container">
	<div style="background-color: #4285F4; padding: .5em 2em;">	
	<label for="reader">To click choose an image:</label>
	<input type="file" accept="image/*" id="reader" />
	
	<!--
	<div style="display: inline-block;">
	<label for="out-placeholder">Placeholder:</label>
	<input type="text" id="out-placeholder" />
	<input type="checkbox" id="chk-random" />
	<label for="chk-random">RANDOMLY</label>
	</div>
	-->
	
	</div>
	
	<span>In:</span>
	<img id="src-viewer"/>
	
	<span>Fitted:</span>
	<canvas id="source" width="80" height="80" style="border: 1px solid black;">
	Your browser does not supported HTML5!
	</canvas>
</div>	

<!--<span>Out:</span>-->

CSS

body {
	margin: 0;
    font: normal 100% "Open Sans",Arial,sans-serif;
  }
  #tip-container {
	text-align: center;	
	padding: 1em 0;
	font-size: 20px;
	font-weight: bold;
	background-color: rgb(255,168,15);
	display: none;
  }
  label, input {
	color: white;
  }
  label {	
	font-weight: bold;
  }
  #dom-result span {
	line-height: 7px;
  }

JavaScript

/** 
	 * Forked from http://jsfiddle.net/ongx/5FjhZ/
	 * @created Dec.20, 2013 10:22 AM 
	 * @updated Dec.27, 2013 12:42 PM 
	 */
	
	var W3C_DOM = Element.prototype.addEventListener;
	
	var IE_DOM 	= Element.prototype.attachEvent;
    
	var $ = function( id ) {
		return document.getElementById( id );
	};
		
	function addEvent( elem, evnt, func) {
		if ( elem.addEventListener )  // W3C DOM
			elem.addEventListener( evnt, func, false );
		else if ( elem.attachEvent )  // IE DOM
			elem.attachEvent( "on" + evnt, func );
		else  						  // No much to do
			elem[ evnt ] = func;
   	}
	
	var _supportedConsole = ! ( "undefined" === typeof( console ) );
	
	/** 
	 * Debugger tools(Actually that is the Browser internal Console, if your 
	 * Browser has supported.)
	 */
	var debug = debug || {		
		enable: 1,
		
		info: ! _supportedConsole ? function() {} : function( o ) {
			this.enable && console.info( o );
		},
		
		log: ! _supportedConsole ? function() {} : function( o ) {
			this.enable && console.log( o );
		},
		
		error: ! _supportedConsole ? function() {} : function( o ) {
			try { this.enable && console.error( o ); 
			} catch( e ) { debug.log( o ); 
			} finally {}
		},
		
		dir: ! _supportedConsole ? function() {} : function( o ) {
			this.enable && console.dir( o );
		} 		
	};
	
	/** 
	 * Randomly generated an int value between 0 and factor(exclusive).
	 * @param {number} you're expecting generate a random factor of int value.
	 * @return {number}
	 */
	function randomInt( factor ) {
		return Math.floor( Math.random() * factor );
	}
	
	function ImageMapper() {
	
		var SPECIAL_CHARACTERS = {
			WHITE_SPACE: '&#32',
			NEW_LINE: '\n' /* Equals to CRLF */
		};
	
		/** @enum {string} @const*/
		var IDS = {
			TIP: "tip-container",
			SRC_CONTAINER: "src-container",
			READER: "reader",			
			INPUT: "src-viewer",
			SOURCE: "source",
			RESULT: "graph-result",
			DOM_RESULT: "dom-result"
		};
		
		var ERRORS_CODE = {
			FILE_TYPE_ILLEGAL: 0x1/*,
			READ_IMG_FAILED:...