webcam实现拍照

webcam下载地址：https://github.com/infusion/jQuery-webcam
参考文档：https://www.xarg.org/project/jquery-webcam-plugin/
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8" />
  5     <title></title>
  6     <script src="jquery-1.11.0.js"></script>
  7     <script src="jquery.webcam.js"></script>
  8 </head>
  9 <body>
 10 
 11 
 12     <div id="cam" style="position: fixed; z-index: 300; width: 500px; height: 400px;
 13             right: 0px; top: 0px; border: solid 2px #000;">
 14         <div id="camBox">
 15             <div id="webcam">
 16             </div>
 17 
 18         </div>
 19     </div>
 20     <div>
 21         <input type="button" id="cli" value="拍照" />
 22     </div>
 23 
 24     <canvas id="canvas" style="border:1px solid red"></canvas>
 25 
 26 </body>
 27 
 28 <script type="text/javascript">
 29 
 30     //var canvas = document.createElement("canvas");
 31     //canvas.setAttribute('width', 320);
 32     //canvas.setAttribute('height', 240);
 33     var canvas = document.getElementById("canvas");//注意不要直接使用css设置画布的宽高
 34     canvas.setAttribute('width', 320);//通过代码设置宽高属性，避免图片无法自适应画布的问题
 35     canvas.setAttribute('height', 240);
 36     var image = new Array();
 37     var ctx = null;
 38     var pos = 0;
 39     var w = 320;//图片的宽高，无论图片的尺寸是否大于画布的尺寸都能自适应
 40     var h = 240;
 41 
 42     //getContext("2d") 对象内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
 43     //可理解为 返回一个用于在画布上绘图的环境，并获得画布的绘图方法对象
 44     var ctx = canvas.getContext("2d");
 45     image = ctx.getImageData(0, 0, 320, 240);//复制画布上指定矩形的像素数据,width,height,data,这样不需要自己手动设置
 46     var img = image;//设置img的属性和值，拍照时重新给data赋值
 47 
 48     //解释Canvas 的ImageData对象，width:图片宽度，height:高度，单位都为像素
 49     //data Uint8ClampedArray类型的一维数组，包含着RGBA格式的整型数据，范围是0-255
 50 
 51     //rgba(red, green, blue, alpha),前三个红绿蓝，范围0-255整数或0%-100%，alpha透明度，0.0-1.0
 52     $(document).ready(function () {
 53         $("#webcam").webcam({
 54             width: 500,
 55             height: 400,
 56             mode: "callback",
 57             swffile: "/jscam_canvas_only.swf",
 58             onTick: function (remain) { },
 59             onSave: function (data) {
 60 
 61                 //图片处理
 62                 var col = data.split(";");
 63 
 64                 //x轴上的每一个像素的rgba
 65                 for (var i = 0; i < 320; i++) {
 66                     var tmp = parseInt(col[i]);
 67                     img.data[pos + 0] = (tmp >> 16) & 0xff;//red
 68                     img.data[pos + 1] = (tmp >> 8) & 0xff;//green
 69                     img.data[pos + 2] = tmp & 0xff;//blue
 70                     img.data[pos + 3] = 0xff;//Alpha
 71                     pos += 4;
 72                 }
 73                 //post>= 4 * 320(x轴像素) * 240(y轴像素) 表示读取图像数据完毕
 74                 if (pos >= 4 * 320 * 240) {
 75                     ctx.putImageData(img, 0, 0);//将图像显示到画布
 76 
 77                     image = new Array();
 78                     pos = 0;
 79                 }
 80 
 81             },
 82             onCapture: function () {
 83                 //拍照，处理图片
 84                 webcam.save();
 85             },
 86             onLoad: function () {
 87                 var cams = webcam.getCameraList();//获取本机摄像头设备
 88 
 89                 for (var i in cams) {
 90                     jQuery("#cams").append("<li>" + cams[i] + "</li>");
 91                 }
 92             }
 93         });
 94 
 95         //点击拍照按钮
 96         $("#cli").click(function () {
 97             window.webcam.capture();
 98         })
 99     });
100 </script>
101 </html>
猜你喜欢
