features/camera/shared/camcanvas.html - wookie - Git at Google

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>

   <script>
   	var gCtx = null;
 	var gCanvas = null;

 	var imageData = null;
 	var ii=0;
 	var jj=0;
 	var c=0;

 	function pageLoad() {
 		initCanvas(320,240);
 	}


 	function initCanvas(ww,hh)
 	{
 		gCanvas = document.getElementById("canvas");
 		var w = ww;
 		var h = hh;
 		gCanvas.style.width = w + "px";
 		gCanvas.style.height = h + "px";
 		gCanvas.width = w;
 		gCanvas.height = h;
 		gCtx = gCanvas.getContext("2d");
 		gCtx.clearRect(0, 0, w, h);
 		imageData = gCtx.getImageData( 0,0,320,240);
 	}

 	function passLine(stringPixels) {
 		//a = (intVal >> 24) & 0xff;

 		var coll = stringPixels.split("-");

 		for(var i=0;i<320;i++) {
 			var intVal = parseInt(coll[i]);
 			r = (intVal >> 16) & 0xff;
 			g = (intVal >> 8) & 0xff;
 			b = (intVal ) & 0xff;
 			imageData.data[c+0]=r;
 			imageData.data[c+1]=g;
 			imageData.data[c+2]=b;
 			imageData.data[c+3]=255;
 			c+=4;
 		}

 		if(c>=320*240*4) {
 			c=0;
       			gCtx.putImageData(imageData, 0,0);
 		}
  	}

         function capture() {
             flash = document.getElementById("embedflash");
             flash.ccCapture();
             var strDataURI = gCanvas.toDataURL();
             image = document.getElementById("dataImage")
             image.src = strDataURI;
             document.getElementById("image").style.display="block";
             document.getElementById("iembedflash").style.display="none";
             document.getElementById("capture_button").style.display="none";
             document.getElementById("save_retake_button").style.display="block";
         }

         function reset(){
             document.getElementById("image").style.display="none";
             document.getElementById("iembedflash").style.display="block";
             document.getElementById("capture_button").style.display="block";
             document.getElementById("save_retake_button").style.display="none";
         }

         function save(){
             self.parent.bondi.camera.getCameras()[0].snapped(gCanvas.toDataURL());
         }

         function cancel(){
             self.parent.bondi.camera.getCameras()[0].cancelled();
         }

     </script>
   <link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />

   <title>Camcanvas - Webcam to Canvas JavaScript API</title>

   </head>

   <body style="background-color:#ddd; text-align:center" onLoad="pageLoad()">

   <div>
 <div class="webcam-target" style="display: none;">
    <canvas id="canvas" width="320" height="240" style="width: 320px; height: 240px; "></canvas>
 </div>

 <div class="webcam-target" style="position:absolute; margin-top:1em;border:12px; background-color:#ddd;width:360px;text-align:center;height:260px;padding-top:15px;;">
   	<object  id="iembedflash" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="320" height="240">
   		<param name="movie" value="camcanvas.swf" />
   		<param name="quality" value="high" />
 		<param name="allowScriptAccess" value="always" />
   		<embed  allowScriptAccess="always"  id="embedflash" src="camcanvas.swf" quality="high" width="320" height="240" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" mayscript="true"  />
     </object>
 </div>

 <div id="image" style="position: absolute; display: none; margin-top:1em;border:12px; background-color:#ddd;width:360px;text-align:center;height:260px;padding-top:15px;;">
     <img id="dataImage" src=""/>
 </div>

 <div id="capture_button" style="position: absolute; width: 360px; margin-top: 270px; text-align: center">
     <button onclick="capture()"><img src="snap.png" title="capture image" alt="capture image"/></button>
 </div>

 <div id="save_retake_button" style="display: none; position: absolute; width: 360px; margin-top: 270px; text-align: center">
     <button onclick="save()">keep image</button>
     <button onclick="reset()">try again</button>
 </div>


 </div>
   </body>
 </html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>

	<script>
	var gCtx = null;
	var gCanvas = null;

	var imageData = null;
	var ii=0;
	var jj=0;
	var c=0;

	function pageLoad() {
	initCanvas(320,240);
	}


	function initCanvas(ww,hh)
	{
	gCanvas = document.getElementById("canvas");
	var w = ww;
	var h = hh;
	gCanvas.style.width = w + "px";
	gCanvas.style.height = h + "px";
	gCanvas.width = w;
	gCanvas.height = h;
	gCtx = gCanvas.getContext("2d");
	gCtx.clearRect(0, 0, w, h);
	imageData = gCtx.getImageData( 0,0,320,240);
	}

	function passLine(stringPixels) {
	//a = (intVal >> 24) & 0xff;

	var coll = stringPixels.split("-");

	for(var i=0;i<320;i++) {
	var intVal = parseInt(coll[i]);
	r = (intVal >> 16) & 0xff;
	g = (intVal >> 8) & 0xff;
	b = (intVal ) & 0xff;
	imageData.data[c+0]=r;
	imageData.data[c+1]=g;
	imageData.data[c+2]=b;
	imageData.data[c+3]=255;
	c+=4;
	}

	if(c>=3202404) {
	c=0;
	gCtx.putImageData(imageData, 0,0);
	}
	}

	function capture() {
	flash = document.getElementById("embedflash");
	flash.ccCapture();
	var strDataURI = gCanvas.toDataURL();
	image = document.getElementById("dataImage")
	image.src = strDataURI;
	document.getElementById("image").style.display="block";
	document.getElementById("iembedflash").style.display="none";
	document.getElementById("capture_button").style.display="none";
	document.getElementById("save_retake_button").style.display="block";
	}

	function reset(){
	document.getElementById("image").style.display="none";
	document.getElementById("iembedflash").style.display="block";
	document.getElementById("capture_button").style.display="block";
	document.getElementById("save_retake_button").style.display="none";
	}

	function save(){
	self.parent.bondi.camera.getCameras()[0].snapped(gCanvas.toDataURL());
	}

	function cancel(){
	self.parent.bondi.camera.getCameras()[0].cancelled();
	}

	</script>
	<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />

	<title>Camcanvas - Webcam to Canvas JavaScript API</title>

	</head>

	<body style="background-color:#ddd; text-align:center" onLoad="pageLoad()">

	<div>
	<div class="webcam-target" style="display: none;">
	<canvas id="canvas" width="320" height="240" style="width: 320px; height: 240px; "></canvas>
	</div>

	<div class="webcam-target" style="position:absolute; margin-top:1em;border:12px; background-color:#ddd;width:360px;text-align:center;height:260px;padding-top:15px;;">
	<object id="iembedflash" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="320" height="240">
	<param name="movie" value="camcanvas.swf" />
	<param name="quality" value="high" />
	<param name="allowScriptAccess" value="always" />
	<embed allowScriptAccess="always" id="embedflash" src="camcanvas.swf" quality="high" width="320" height="240" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" mayscript="true" />
	</object>
	</div>

	<div id="image" style="position: absolute; display: none; margin-top:1em;border:12px; background-color:#ddd;width:360px;text-align:center;height:260px;padding-top:15px;;">
	<img id="dataImage" src=""/>
	</div>

	<div id="capture_button" style="position: absolute; width: 360px; margin-top: 270px; text-align: center">
	<button onclick="capture()"><img src="snap.png" title="capture image" alt="capture image"/></button>
	</div>

	<div id="save_retake_button" style="display: none; position: absolute; width: 360px; margin-top: 270px; text-align: center">
	<button onclick="save()">keep image</button>
	<button onclick="reset()">try again</button>
	</div>


	</div>
	</body>
	</html>