利用html5呼叫本地攝像頭拍照上傳圖片
阿新 • • 發佈：2019-02-08
-
<script>
-
//判斷瀏覽器是否支援HTML5 Canvas
-
window.onload = function () {
-
try {
-
//動態建立一個canvas元 ，並獲取他2Dcontext。如果出現異常則表示不支援 document.createElement("canvas").getContext("2d");
-
document.getElementByIdx("support").innerHTML = "瀏覽器支援HTML5 CANVAS";
-
}
-
catch (e) {
-
document.getElementByIdx("support").innerHTML = "瀏覽器不支援HTML5 CANVAS";
-
}
-
};
-
//這段代 主要是獲取攝像頭的視訊流並顯示在Video 籤中
-
window.addEventListener("DOMContentLoaded", function () {
-
var canvas = document.getElementByIdx("canvas"),
-
context = canvas.getContext("2d"),
-
video = document.getElementByIdx("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();
-
});
-
}, false);
-
//定時器
-
var interval = setInterval(CatchCode, "300");
-
//這個是 重新整理上 影象的
-
function CatchCode() {
-
$("#snap").click();
-
//實際運用可不寫，測試代 ， 為單擊拍照按鈕就獲取了當前影象，有其他用途
-
var canvans = document.getElementByIdx("canvas");
-
//獲取瀏覽器頁面的畫布物件
-
//以下開始編 資料
-
var imgData = canvans.toDataURL();
-
//將影象轉換為base64資料
-
var base64Data = imgData.substr(22);
-
//在前端擷取22位之後的字串作為影象資料
-
//開始非同步上
-
$.post("uploadImgCode.ashx", { "img": base64Data }, function (data, status) {
-
if (status == "success") {
-
if (data == "OK") {
-
alert("二維 已經解析");
-
}
-
else {
-
// alert(data);
-
}
-
}
-
else {
-
alert("資料上 失敗");
-
} }, "text");
-
}
- </script>