jQuery調用攝像頭插件jquery-webcam-plugin拍照

插件網址：https://www.xarg.org/project/jquery-webcam-plugin/

代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="jquery.webcam.js"></script>
</head>
<body>

    <div id="cam" style="position: fixed; z-index: 300; width: 500px; height: 400px;
            right: 0px; top: 0px; border: solid 2px #000;">
        <div id="camBox">
            <div id="webcam">
            </div>

        </div>
    </div>
    <div>
        <input type="button" id="cli" value="拍照" />
    </div>

    <canvas id="canvas" style="border:1px solid red"></canvas>

</body>

<script type="text/javascript">

    //var canvas = document.createElement("canvas");
    //canvas.setAttribute(\'width\', 320);
    //canvas.setAttribute(\'height\', 240);
    var canvas = document.getElementById("canvas");//注意不要直接使用css設定畫布的寬高
    canvas.setAttribute(\'width\', 320);//通過代碼設定寬高屬性，避免圖檔無法自适應畫布的問題
    canvas.setAttribute(\'height\', 240);
    var image = new Array();
    var ctx = null;
    var pos = 0;
    var w = 320;//圖檔的寬高，無論圖檔的尺寸是否大于畫布的尺寸都能自适應
    var h = 240;

    //getContext("2d") 對象内建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字元以及添加圖像的方法
    //可了解為 傳回一個用于在畫布上繪圖的環境，并獲得畫布的繪圖方法對象
    var ctx = canvas.getContext("2d");
    image = ctx.getImageData(0, 0, 320, 240);//複制畫布上指定矩形的像素資料,width,height,data,這樣不需要自己手動設定
    var img = image;//設定img的屬性和值，拍照時重新給data指派

    //解釋Canvas 的ImageData對象，width:圖檔寬度，height:高度，機關都為像素
    //data Uint8ClampedArray類型的一維數組，包含着RGBA格式的整型資料，範圍是0-255

    //rgba(red, green, blue, alpha),前三個紅綠藍，範圍0-255整數或0%-100%，alpha透明度，0.0-1.0
    $(document).ready(function () {
        $("#webcam").webcam({
            width: 500,
            height: 400,
            mode: "callback",
            swffile: "jscam_canvas_only.swf",
            onTick: function (remain) { },
            onSave: function (data) {

                //圖檔處理
                var col = data.split(";");

                //x軸上的每一個像素的rgba
                for (var i = 0; i < 320; i++) {
                    var tmp = parseInt(col[i]);
                    img.data[pos + 0] = (tmp >> 16) & 0xff;//red
                    img.data[pos + 1] = (tmp >> 8) & 0xff;//green
                    img.data[pos + 2] = tmp & 0xff;//blue
                    img.data[pos + 3] = 0xff;//Alpha
                    pos += 4;
                }
                //post>= 4 * 320(x軸像素) * 240(y軸像素) 表示讀取圖像資料完畢
                if (pos >= 4 * 320 * 240) {
                    ctx.putImageData(img, 0, 0);//将圖像顯示到畫布
                    $.post("upload.php", {type: "data", image: canvas.toDataURL("image/png")},function(result){console.log(result)});//上傳圖檔到伺服器。
                    image = new Array();
                    pos = 0;
                }

            },
            onCapture: function () {
                //拍照，處理圖檔
                webcam.save();
            },
            onLoad: function () {
                var cams = webcam.getCameraList();//擷取本機攝像頭裝置

                for (var i in cams) {
                    jQuery("#cams").append("<li>" + cams[i] + "</li>");
                }
            }
        });

        //點選拍照按鈕
        $("#cli").click(function () {
            window.webcam.capture();
        })
    });
</script>
</html>

伺服器代碼（PHP):

<?php 
    $image_type=$_POST[\'type\'];
    $image_data=$_POST[\'image\'];
    $img = str_replace(\'data:image/png;base64,\', \'\', $image_data);
        $img = str_replace(\' \', \'+\', $img);
        $data = base64_decode($img);
       // 圖檔名稱
        $file_name = "../uploads/head/".time().".png";
        $fp = fopen($file_name, \'w\');
        fwrite($fp, $data);
        fclose($fp);
 ?>

注：chrome浏覽器需要https://傳輸協定，IE下暫時不用。