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>