ss_new_ui_skin_and_page/ss/yx/yx_zjz.js

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;

}