Accessing Camera Without any extra plugin

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

https://www.raymondcamden.com/2013/05/20/capturing-camerapicture-data-without-phonegap

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s