瀏覽器利用Webcam+Flash啟用攝像頭，并完成拍照

發(fā)布時(shí)間：2020-05-30 20:58:28 來(lái)源：網(wǎng)絡(luò) 閱讀：5011 作者：Red_Ant_hoyl 欄目：web開(kāi)發(fā)

大家都比較喜歡談?wù)摳呖?，然而筆者就不愿意提及，因?yàn)楣P者高考很不理想，以致于意志消沉。后來(lái)吧，就迷戀上了游戲一直到上個(gè)月，可以說(shuō)是不學(xué)無(wú)術(shù)已經(jīng)很久了?；鸨钠庖彩请S之而來(lái)，雖時(shí)光不再，脾氣尚存。怎么辦呢，筆者用HBuilder寫(xiě)點(diǎn)東西消消火。閑扯一下，很開(kāi)心。下面直接上代碼了：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>瀏覽器利用Webcam+Flash啟用攝像頭，并完成拍照</title>
    </head>
        <!-- 照片 -->
            <label class="control-label"></label>
            <div id="photo_show">
                <!--拍照完成后，顯示的區(qū)域，自己完善去吧！
                這里給你一個(gè)默認(rèn)顯示的圖片，就是前面我們講導(dǎo)航條的時(shí)候用到的 那張    -->
                <img  id="userphoto" src="img/logo.png">
            </div>
            <div id="ing_photo"  ><!-- 正在拍照 -->
                <canvas id="cv20180820pm900"  width="200" height="150" ></canvas>
                <div id="webcam"></div> 
            </div>
            <div id="taking_photo" ><!-- 以點(diǎn)擊拍照 -->
            </div> 
            <input class="btn green editable" type="button" id="bu tton_photo" title="啟動(dòng)攝像頭" value="啟動(dòng)攝像頭" onclick="open_camer();" />
            <input class="btn green editable"  type="button" id="take_photo_upload" title="拍照" value="拍照" onclick="getPhoto();" />
    </body>
        <script type="text/javascript" src="js/jquery.min.js" ></script>
        <script type="text/javascript" src="js/jquery.webcam.min.js" ></script>     
        <script type="text/javascript" src="js/base64.js" ></script>
    <script>
    var w = 320, h = 240;                                       
    var pos = 0, ctx = null, saveCB, image = [];
    debugger;
    var canvas = document.getElementById('cv20180820pm900');
        canvas.setAttribute('width', w);
        canvas.setAttribute('height', h); 
    var ctx = canvas.getContext("2d"); 
    var image = ctx.getImageData(0, 0, w, h);
    var Imagedata;
    function open_camer(){//開(kāi)啟攝像頭 
        $("#photo_show").hide();//攝像區(qū)域顯示
        $("#ing_photo" ).show();
        $("#button_photo").hide();//啟動(dòng)攝像頭，按鈕隱藏
        $("#take_photo_upload").show();//拍照按鈕顯示
    }  
    $("#webcam").webcam({
        width : w,
        height : h,
        mode : "callback",
        swffile : "js/jscam_canvas_only.swf",
        onTick : function(remain) {
            if (0 == remain) {
                $("#status").text("");
            } else {
                $("#status").text(remain + "秒后拍照");
            }
        },
     onSave : function(data) {
            var col = data.split(";");
            var img = image;
            for (var i = 0; i < w; i++) {
                var tmp = parseInt(col[i]);
                img.data[pos + 0] = (tmp >> 16) & 0xff;
                img.data[pos + 1] = (tmp >> 8) & 0xff;
                img.data[pos + 2] = tmp & 0xff;
                img.data[pos + 3] = 0xff;
                pos += 4;
            }
            if (pos >= 4 * w * h) {
                ctx.putImageData(img, 0, 0);
                pos = 0; 
                Imagedata = canvas.toDataURL().substring(22);
            }
        }, 
        onCapture : function() {
            webcam.save();
            $.post("AddPhoto.action", {
                image : canvas.toDataURL()
            }, function(msg) {
            });
        },
        debug : function(type, string) {
            console.log(type + ": " + string);
        },
        onLoad : function() {
            console.log('')
            var cams = webcam.getCameraList();
            for ( var i in cams) {
                $("body").append("<p>" + cams[i] + "</p>");
            }
        }
    });

    //拍照  
    function getPhoto() {
        webcam.capture();
         $("#photo_show").hide();
        $("#ing_photo").hide;
        /*思路：
         * 筆者本著，一切數(shù)據(jù)均為二進(jìn)制編碼的原則，處理圖片
          1、通過(guò)canvas，將圖片轉(zhuǎn)換為Base64的編碼
          2、把Base64的編碼使用ajax post方式傳遞到后臺(tái)java
          3、在java中對(duì)Base64進(jìn)行解碼，解析出來(lái)路徑就是圖片上傳的路徑地址
          4、最后存儲(chǔ)圖片
         */
        //上傳部分  
        var uuid = $('#uuid').val();
        var url = "AddPhoto.action"
        var pars = {
            'type' : 1,
            'uuid' : uuid,
            'imagedata' : Imagedata
        };
        $.ajax({
            type : "POST", // 用POST方式傳輸
            url : url,
            data : pars,
            dataType : 'json',
            async : false,
            beforeSend : function() {
            },
            complete : function() {
            },
            error : function(XMLHttpRequest, textStatus, errorThrown) {
            },
            success : function(data) {
            },
            cache : false
        });
    }
</script>
</html>

瀏覽器利用Webcam+Flash啟用攝像頭，并完成拍照
接下來(lái)，我們點(diǎn)擊啟動(dòng)攝像頭。

選擇拍照之后，照片數(shù)據(jù)會(huì)以二進(jìn)制編碼的格式發(fā)送至后臺(tái)進(jìn)行存儲(chǔ)。

//1、處理Base64圖片代碼
            String imgaePath = "c:\\"+DateUtil.getTimestamp()+"20180820.jpg";
            GenerateImage(imagedata, imgaePath);

```
//對(duì)字節(jié)數(shù)組字符串進(jìn)行Base64解碼，并生成圖片 20180820
private void GenerateImage(String imagedata, String imgaePath) {
    if(imagedata.isEmpty()){//判斷圖像數(shù)據(jù)是否為空
        return;
    }
    BASE64Decoder decoder = new BASE64Decoder();
    try {//進(jìn)行Base64解碼
        byte[] bytes = decoder.decodeBuffer(imagedata);
        for (int i = 0; i < bytes.length; i++) {
            if(bytes[i] < 0){//調(diào)整異常數(shù)據(jù)
                bytes[i] += 256;
            }
        }
        //生成jpeg圖片
        OutputStream out = new FileOutputStream(imgaePath);
        out.write(bytes);
        out.flush();
        out.close();
        return;
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
}

接下來(lái)，你會(huì)在你的電腦C盤(pán)下，找到這張照片。

瀏覽器利用Webcam+Flash啟用攝像頭，并完成拍照



好了，筆者要去吃雞了。

向AI問(wèn)一下細(xì)節(jié)

瀏覽器利用Webcam+Flash啟用攝像頭，并完成拍照

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽