Index: ssts-web/src/main/webapp/disinfectsystem/test/takeVideoAndImg.js =================================================================== diff -u -r27864 -r28143 --- ssts-web/src/main/webapp/disinfectsystem/test/takeVideoAndImg.js (.../takeVideoAndImg.js) (revision 27864) +++ ssts-web/src/main/webapp/disinfectsystem/test/takeVideoAndImg.js (.../takeVideoAndImg.js) (revision 28143) @@ -102,8 +102,8 @@ function openCamera() { var video = document.getElementById('video'); - var videoWidth = 1024; - var videoHeight = 650; + var videoWidth = cameraWidth; + var videoHeight = cameraHeight; video.controls = false; video.muted = true; @@ -179,12 +179,15 @@ // 这段代码主要是获取摄像头的视频流并显示在Video 签中 $(function () { var cameraHeight = $(window).height()-$(".camera_footer").height()-20; + var cameraWidth = parseInt(cameraHeight/480*640); $(".camera_wrapper").css({"height":cameraHeight+"px"}); var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); /* 预览大图图片 */ var canvasBig = document.getElementById("canvasBig"); + canvasBig.setAttribute('width',cameraWidth); + canvasBig.setAttribute('height',cameraHeight); var contextBig = canvasBig.getContext("2d"); var video = document.getElementById("video"); @@ -194,7 +197,6 @@ var errBack = function (error) { //console.log("Video capture error: ", error.code); }; - if (navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia(videoObj).then(function (stream) { video.srcObject = stream; @@ -224,7 +226,7 @@ $("#canvas").hide(0).slideDown("normal"); $("#canvas").addClass("animate-bounce-up"); context.drawImage(video, 0, 0, imgWidth, imgHeight); - contextBig.drawImage(video, 0, 0, 1024, 650); + contextBig.drawImage(video, 0, 0, cameraWidth, cameraHeight); /* 显示在多图片页面 */ var base64Data = canvas.toDataURL('image/jpeg', 1.0); /* 预览大图 */ @@ -280,7 +282,7 @@ $("#canvas").hide(0).slideDown("normal"); $("#canvas").addClass("animate-bounce-up"); context.drawImage(video, 0, 0, imgWidth, imgHeight); - contextBig.drawImage(video, 0, 0, 1024, 650); + contextBig.drawImage(video, 0, 0, cameraWidth, cameraHeight); //预览大图 base64DataBig2 = canvasBig.toDataURL('image/jpeg', 1.0); } @@ -291,7 +293,7 @@ mediaRecorder.stop(); setTime('end'); context.drawImage(video, 0, 0, imgWidth, imgHeight); - contextBig.drawImage(video, 0, 0, 1024, 650); + contextBig.drawImage(video, 0, 0, cameraWidth, cameraHeight); var endTime = new Date(); var duration = intervalTime(beginTime, endTime); durationTime = duration;