h5+jquery自制相機，獲取圖片並上傳

html代碼:

<div id="contentHolder">
　　<video id="video" width="100%" height="527px" autoplay></video>
　　<button id="snap" style="display:none">拍照</button>
　　<button>返回</button>
　　<button id="cancleBtn">重拍</button>
　　<button id="stopBtn"><img src="img/takePhoto.png"></button>
　　<button id="uploadBtn">上傳<button>
　　<canvas style="display:none" id="canvas" width="320" height="320"></canvas>//使用者看到的是video，而上傳的是canvas中的畫像
</div>

 

js代碼:

function onload();
　　try {
　　　　document.createElement("canvas").getContext("2d");      //動態創建一個canvas元 ，並獲取他2Dcontext。如果出現異常則表示不支持 

　　　　alert("瀏覽器支持HTML5 CANVAS");
　　}catch (e) {
　　　　alert("瀏覽器不支持HTML5 CANVAS");
　　}
　　document.createElement("canvas").getContext("2d");
　　var canvas = document.getElementById("canvas"),
　　context = canvas.getContext("2d"),
　　video = document.getElementById("video"),
　　videoObj = { "video": true },
　　errBack = function (error) {                //錯誤返回
　　　　console.log("Video capture error: ", error.code);
　　};
　　//navigator.getUserMedia這個寫法在Opera中好像是navigator.getUserMedianow
　　if (navigator.getUserMedia) {
　　　　navigator.getUserMedia(videoObj, function (stream) {
　　　　　　video.src = stream;
　　　　　　video.play();
　　　　}, errBack);
　　}else if (navigator.webkitGetUserMedia) {
　　　　navigator.webkitGetUserMedia(videoObj, function (stream) {
　　　　　　video.src = window.webkitURL.createObjectURL(stream);
　　　　　　video.play();
　　　　}, errBack);
　　}
　　//這個是拍照按鈕的事件，
　　$("#snap").click(function () {
　　　　context.drawImage(video, 0, 0, 320, 320);   
　　　　//CatchCode();
　　});
　　//定時器
　　var interval = setInterval(CatchCode, "300"); //每300秒調用一遍CatchCode()
　　var imgData;
　　function CatchCode() {
　　　　$("#snap").click();
　　　　//實際運用可不寫，測試代 ， 為單擊拍照按鈕就獲取了當前圖像，有其他用途
　　　　var canvans = document.getElementById("canvas");
　　　　//獲取瀏覽器頁面的畫布對象
　　　　//以下開始編 數據
　　　　imgData = canvans.toDataURL();
　　　　console.log(imgData);
　　}
　　$("#stopBtn").click(function(){    //點擊拍照
　　　　video.pause();　　　　　　　　//暫停video　　
　　　　clearInterval(interval);           //清除定時器
　　})
　　$("#cancleBtn").click(function(){    //點擊取消
　　　　video.play();　　　　　　　　　　//啟動video，顯示圖像
　　　　interval = setInterval(CatchCode, "300");    //啟動定時器
　　})
　　$("#uploadBtn").click(function(){               //點擊上傳
　　　　console.log(imgData);
　　　　var base64Data = imgData.substr(22);     將canvas中的圖像轉成base64數據
　　　　//在前端截取22位之后的字符串作為圖像數據
　　　　//開始異步上傳
　　　　$.post(rootUrl+"/user/uploadUserImgeBase.do", { "file": base64Data,"token":token}, function (data) {
　　　　　　console.log(data);
　　　　　　if (data.responseCode == "00000") {
　　　　　　　　alertModel("上傳成功!");
　　　　　　}else {
　　　　　　　　alertModel(data.responseMsg);
　　　　　　}
　　　　}, "json");     //數據格式，我用的是json           
　　})
}