HTML5 APP應用實現圖片上傳及拍照上傳功能
阿新 • • 發佈:2018-11-29
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