本功能只能把圖片轉成base64碼上傳，如何上傳圖片還沒有修改出來，有興趣的朋友弄出來了，請給我留下言，謝謝了！
直接上代碼，需要的朋友直接復制就可以使用了。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
//判斷瀏覽器是否支持HTML5 Canvas
window.onload = function () {
try {
//動態創建一個canvas元 ，並獲取他2Dcontext。如果出現異常則表示不支持 document.createElement("canvas").getContext("2d");
// document.getElementById("support").innerHTML = "瀏覽器支持HTML5 CANVAS";
}
catch (e) {
// document.getElementByIdx("support").innerHTML = "瀏覽器不支持HTML5 CANVAS";
}
};
//這段代 主要是獲取攝像頭的視頻流並顯示在Video 簽中
window.addEventListener("DOMContentLoaded", function () {
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);
};
$("#snap").click(function () {
context.drawImage(video, 0, 0, 330, 250);
})
//navigator.getUserMedia這個寫法在Opera中好像是navigator.getUserMedianow
if (navigator.getUserMedia) {
navigator.getUserMedia(videoObj, function (stream) {
video.srcObject = stream;
video.play();
}, errBack);
} else if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(videoObj, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
}, false);
//上傳服務器
function CatchCode() {
var canvans = document.getElementById("canvas");
//獲取瀏覽器頁面的畫布對象
//以下開始編 數據
var imgData = canvans.toDataURL();
console.log(canvans.toLocaleString());
//將圖像轉換為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>
</head>
<body>
<div id="contentHolder">
<video id="video" width="320" height="320" autoplay></video>
<input type="button" id="snap" style="width:100px;height:35px;" value="拍 照" />
<canvas style="" id="canvas" width="320" height="320"></canvas>
<input type="button" value="上傳" onclick="CatchCode()" />
</div>
</body>
</html>