cfjedimaster · September 10, 2017 23:14
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE HTML>
 <html>
 	<head>
 	<meta name="viewport" content="width=320; user-scalable=no" />
 	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
 	<title>ColorThief Demo</title>
 	
 	<script type="text/javascript" charset="utf-8" src="jquery-2.0.0.min.js"></script>
 	<script type="text/javascript" charset="utf-8" src="quantize.js"></script>
 	<script type="text/javascript" charset="utf-8" src="color-thief.js"></script>
        
 	<style>
 	#yourimage {
 		width:100%;	
 	}
 	
 	#swatches {
 		width: 100%;
 		height: 50px;	
 	}

 	.swatch {
 		width:18%;
 		height: 50px;
 		border-style:solid;
 		border-width:thin;	
 		float: left;
 		margin-right: 3px;	
 	}
 	</style>
 	</head>

 	<body>

 		<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>
 		
    <script>
 	var desiredWidth;

    $(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]));
        }
 	}
 	
 	
        
    </script>    
 	</body>

 </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta name="viewport" content="width=320; user-scalable=no" />
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>ColorThief Demo</title>

	<script type="text/javascript" charset="utf-8" src="jquery-2.0.0.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="quantize.js"></script>
	<script type="text/javascript" charset="utf-8" src="color-thief.js"></script>

	<style>
	#yourimage {
	width:100%;
	}

	#swatches {
	width: 100%;
	height: 50px;
	}

	.swatch {
	width:18%;
	height: 50px;
	border-style:solid;
	border-width:thin;
	float: left;
	margin-right: 3px;
	}
	</style>
	</head>

	<body>

	<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>

	<script>
	var desiredWidth;

	$(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]));
	}
	}



	</script>
	</body>

	</html>