window.onload = function() { var imgdataBase64 = null; var videoElement = document.querySelector('video'); var videoSelect = document.querySelector('select#videoSource'); var btn = document.querySelector("#btn"); var canvas = document.querySelector("#canvas"); // var context = canvas.getContext('2d'); var sfzImg = $("#sfzImg"); var width = sfzImg.width(); var contentWidth; var contentHeight; var scale; var canvasWidth; var canvasHeight; $("#video").bind("loadedmetadata", function() { contentWidth = this.videoWidth; contentHeight = this.videoHeight; scale = contentWidth / contentHeight; var height = width / scale; sfzImg.css('height', height) canvasWidth = width * 10; canvasHeight = height * 10; videoElement.setAttribute('width', contentWidth); videoElement.setAttribute('height', contentHeight); canvas.setAttribute('width', canvasWidth); canvas.setAttribute('height', canvasHeight); }); var imgWidth = 1000; // var imgHeigh=1400; var imgHeigh = 1292; var settings = { width: imgWidth, height: imgHeigh, /* 改。Lin action: "/service?wdApplication=wd&wdService=uploadForAjax" */ action: "/service?ssServ=ulByHttp&type=img" }; /** * 获取所有设备 */ function getDevices() { return navigator.mediaDevices.enumerateDevices(); } //处理设备 function gotDevices(deviceInfos) { for (const deviceInfo of deviceInfos) { const option = document.createElement('option'); option.value = deviceInfo.deviceId; if (deviceInfo.kind === 'videoinput') { option.text = deviceInfo.label || `Camera $ { videoSelect.length + 1 }`; videoSelect.appendChild(option); } } } function getStream() { const videoSource = videoSelect.value; const constraints = { video: { deviceId: videoSource } }; return navigator.mediaDevices.getUserMedia(constraints).then(gotStream). catch(handleError); } function gotStream(stream) { window.stream = stream; videoElement.srcObject = stream; } function handleError(error) { console.error('Error: ', error); alert("如果您当前使用的是谷歌浏览器,请重新插拔摄像头接口,然后再刷新页面"); } function tackcapture() { if (this.value == '拍照') { $("#video").css("display", "block"); $("#image").css("display", "none"); getStream().then(getDevices).then(gotDevices); this.value = "截取画面"; } else if (this.value == '截取画面') { // 将视频画面捕捉后绘制到canvas里面 videoElement.setAttribute('width', canvasWidth); videoElement.setAttribute('height', canvasHeight); context = canvas.getContext('2d'); context.clearRect(0, 0, canvasWidth, canvasHeight); context.drawImage(videoElement, 0, 0,canvasWidth, canvasHeight); imgdataBase64 = canvas.toDataURL('image/png'); initCropper1(document.getElementById("file"), settings, cropConfirm, convertBase64UrlToBlob(imgdataBase64)); videoElement.setAttribute('width', contentWidth); videoElement.setAttribute('height', contentHeight); } } //关闭摄像头 function closeMedia() { window.stream.getTracks().forEach(function(track) { track.stop(); }); } function cropConfirm(result) { closeMedia(); var path = result.fileList[0].path; /* 改。Lin var url = "/service?wdService=getData&path=" + path; */ var url = "/service?ssServ=dlByHttp&type=img&path="+ path; $("#image").attr("src", url); $("#video").css("display", "none"); $("#image").css("display", "block"); $("#btn").val("拍照"); $("input[name='zjzwj']").val(path); } //注册拍照截图功能 btn.addEventListener('click', tackcapture, false); function convertBase64UrlToBlob(urlData) { var bytes = window.atob(urlData.split(',')[1]); //去掉url的头,并转换为byte //处理异常,将ascii码小于0的转换为大于0 var ab = new ArrayBuffer(bytes.length); var ia = new Uint8Array(ab); for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } return new Blob([ab], { type: 'image/jpeg' }); } } var file = {}; //裁剪 function initCropper1(fileEle, settings, cropConfirm, fileDate) { file["name"] = new Date().getTime() + ".png"; initWdCropper(); wdCropper.topWin = wd.topWindow; wdCropper.thisWindow = window; wdCropper.settings = settings; wdCropper.fileEle = fileEle; wdCropper.cropConfirm = cropConfirm; /// 增加,类似 upload.js 里的 initCropper( -- 去掉 /wd/js/ueditor/dialogs/wdimage/upload.js,改用 /wd/js/upload.js。Lin // 不加的话,因为 wdCropper.cropper.fileName = null,导致不能复制到 /data/img/ wdCropper.cropper.fileName = file.name; /// wdCropper.fileObj = fileDate; var uploadedImageURL = URL.createObjectURL(fileDate); var img = new Image(); img.onload = function() { /*img.width = 300; img.height = 420;*/ wdCropper.layer.show({ width: img.width, height: img.height }); wdCropper.cropper.init(); wdCropper.cropper.replace(uploadedImageURL); } img.src = uploadedImageURL; }