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           
　　})
}