HTML5 APP應用實現圖片上傳及拍照上傳功能

HTMl5 APP手機端代碼：

 

<video id="myVideo" autoplay="autoplay"></video>
    <br />
    <input type="button" value="拍照" /><br />
    拍照結果：
    <div id="result">
    </div>
    <script type="text/javascript">
        $(document).ready(init);
        function init() {
//爲了便於使用這個接口，先做一下兼容性處理
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
            //Google Chrome用webkitGetUserMedia，Firefox用mozGetUserMedia
            navigator.getUserMedia({video:true}, success, error);  //顯示影像
            //定義button點擊後要做什麼
            $("input[type='button']").click(function () {
                shoot(); //執行拍照
            });
        }
        function success(stream) {
            $("#myVideo").attr("src", window.webkitURL.createObjectURL(stream));
$("#myVideo").play();
        }
function error(error) {
alert(error.name || error);
}
        //拍照
        function shoot() {
            var video = $("#myVideo")[0];
            var canvas = capture(video);
            $("#result").empty();
            $("#result").append(canvas); //呈現圖像(拍照結果)
            var imgData = canvas.toDataURL("image/jpg");
            var base64String = imgData.substr(22); //取得base64字串
            //上傳，儲存圖片
            $.ajax({
                url: "vod/avatar.php",
                type: "post",
                data: { data: base64String },
                async: true,
                success: function (htmlVal) {
                    alert("另存圖片成功！");
                }, error: function (e) {
                    alert(e.responseText); //alert錯誤信息
                }
            });
        }
        //從video元素抓取圖像到canvas
        function capture(video) {
            var canvas = document.createElement('canvas'); //建立canvas js DOM元素
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0); 
            return canvas;
        }
    </script>

PHP服務器端代碼（服務器端處理相對簡單）：

<?php
function convert_data($data){
$image=base64_decode(str_replace('data:image/jpeg;base64,','',$data));
save_to_file($image);
}
function save_to_file($image){
$filename='avatar/'.time();
$filename.='.jpg';
$fp=fopen($filename,'w');
fwrite($fp,$image);
fclose($fp);
}
convert_data($_REQUEST['data']);

2015-07-20