H5實現拍照並上傳

吞吞吐吐的發表於2017-11-08
H5

<!DOCTYPE HTML>

<html>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no” />

    <meta name=”apple-mobile-web-app-capable” content=”yes” />

    <meta name=”apple-mobile-web-app-status-bar-style” content=”black” />

    <meta content=”telephone=no” name=”format-detection” />

    <title>測試</title>

</head>

<body>

<video id=”video” width=”320″ height=”240″ autoplay></video>

<button id=”snap”>拍攝</button>

<canvas id=”canvas” width=”320″ height=”240″></canvas>

<script>

    window.addEventListener(“DOMContentLoaded”, function() {

        var canvas = document.getElementById(“canvas”),//呼叫canvas介面

                context = canvas.getContext(“2d”),

                video = document.getElementById(“video”),

                videoObj = { “video”: true },

                errBack = function(error) {//錯誤處理

                    console.log(“Video capture error: “, error.code);

                };

        if(navigator.getUserMedia) {//呼叫html5拍攝介面

            navigator.getUserMedia(videoObj, function(stream) {

                video.src = stream;//攝像機屬於視訊流，所以當然要輸出到html5的video標籤中了

                video.play();//開始播放

            }, errBack);

        } else if(navigator.webkitGetUserMedia) { //WebKit核心呼叫html5拍攝介面

            navigator.webkitGetUserMedia(videoObj, function(stream){

                video.src = window.webkitURL.createObjectURL(stream);//同上

                video.play();//同上

            }, errBack);

        }

        else if(navigator.mozGetUserMedia) { //moz核心呼叫html5拍攝介面

            navigator.mozGetUserMedia(videoObj, function(stream){

                video.src = window.URL.createObjectURL(stream);//同上

                video.play();//同上

            }, errBack);

        }

    }, false);


    document.getElementById(“snap”)

            .addEventListener(“click”, function() {//獲取拍照按鈕繫結事件

                var canvans = document.getElementById(“canvas”),//呼叫canvas介面

                        context = canvas.getContext(“2d”);

                context.drawImage(video, 0, 0, 640, 480);//呼叫canvas介面的drawImage方法繪製當前video標籤中的靜態圖片，其實就是截圖


                var imgData = canvans.toDataURL();//獲取圖片的base64格式的資料

                //這裡就可以寫上傳伺服器程式碼了

            });

</script>

</body>

</html>

本文轉自左正部落格園部落格，原文連結：http://www.cnblogs.com/soundcode/p/5101941.html，如需轉載請自行聯絡原作者


相關文章