JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<script type="text/javascript" charset="utf-8" src="http://lokeshdhakar.com/projects/color-thief/js/libs/quantize.js"></script>
	<script type="text/javascript" charset="utf-8" src="http://lokeshdhakar.com/projects/color-thief/js/color-thief.js"></script>
<input type="file" capture="camera" accept="image/*" id="takePictureField">
        
		<img id="yourimage">
 
		<div id="swatches">
			<div id="swatch0" class="swatch"></div>
			<div id="swatch1" class="swatch"></div>
			<div id="swatch2" class="swatch"></div>
			<div id="swatch3" class="swatch"></div>
			<div id="swatch4" class="swatch"></div>
		</div>

CSS

#yourimage {
		width:100%;	
	}
	
	#swatches {
		width: 100%;
		height: 50px;	
	}
 
	.swatch {
		width:18%;
		height: 50px;
		border-style:solid;
		border-width:thin;	
		float: left;
		margin-right: 3px;	
	}

JavaScript

$(document).ready(function() {
        console.log('onReady');
		$("#takePictureField").on("change",gotPic);
		$("#yourimage").load(getSwatches);
		desiredWidth = window.innerWidth;
        
        if(!("url" in window) && ("webkitURL" in window)) {
            window.URL = window.webkitURL;   
        }
		
	});
 
	function getSwatches(){
		var colorArr = createPalette($("#yourimage"), 5);
		for (var i = 0; i < Math.min(5, colorArr.length); i++) {
			$("#swatch"+i).css("background-color","rgb("+colorArr[i][0]+","+colorArr[i][1]+","+colorArr[i][2]+")");
			console.log($("#swatch"+i).css("background-color"));
		}
	}	
	
    //Credit: https://www.youtube.com/watch?v=EPYnGFEcis4&feature=youtube_gdata_player
	function gotPic(event) {
        if(event.target.files.length == 1 && 
           event.target.files[0].type.indexOf("image/") == 0) {
            $("#yourimage").attr("src",URL.createObjectURL(event.target.files[0]));
        }
	}