哪位 大大给个思路
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>拍照上传</title>
<link href="/css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" src="/js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript" src="/js/sm2.js"></script>
<style type="text/css">
body{
margin: 0;
overflow: hidden;
height: 100%;
}
.content{
padding:0.5rem;
width: 300px;
height: 200px;
overflow: hidden;
margin: auto;
align-items: center;
border-bottom: 1px #999 solid;
}
.container{
background-color:#e7e7e7;
margin: 0px auto;
}
.content_idcard{
margin: auto;
text-align: center;
padding: 0.5rem 0;
}
.container p{
font-size: 0.9rem;
color:#999
}
.canvas{
display: none;
margin: auto;
text-align: center;
padding: 0.5rem 0;
}
.photograph{
position:absolute;
background-color:#e7e7e7;
top: 50%;
height: 50%;
width:100%;
padding: 0px;
overflow: auto;
z-index:999;
display: none;
}
.content_video{
background-color:#e7e7e7;
display: none;
width:100%;
height: 100%;
}
.video{
padding: 0px;
margin: auto;
width:100%;
text-align: center;
}
</style>
</head>
<body>
<form id="mainForm">
<div class="content" id="content" >
<div class="container">
<div id='face-empty-result' class="content_idcard" >
<img style='width:10rem;' src="/images/camera.png" alt="身份证正面照" >
<p>身份证正面照</p>
</div>
<!--描绘video截图-->
<canvas id="canvas" class="canvas"></canvas>
</div>
</div>
<div class="content_video" id="content_video">
<div id="clipArea" style="border: 2px dashed cornflowerblue;position:absolute;"></div>
<video id="video" class="video" autoplay="autoplay" webkit-playsinline="webkit-playsinline" ></video>
</div>
<div class="photograph" id="photograph" >
<input type="button" id="capture" value="拍照" style="width: 80px; height: 80px;margin: 10px auto;display:block; background-color: #00FFFF; border-radius:50%;border: none">
</div>
</form>
<script src="/js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
let video = document.getElementById("video");
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
let _clipArea = document.getElementById("clipArea");
let pWidth = document.documentElement.clientWidth; //屏幕宽度
let pHeight = document.documentElement.clientHeight; //屏幕高度
window.onload=function() {
var _content = document.getElementById("content");
_content.style.width = (pWidth-40)+"px";
_content.style.height = ((pWidth-40)/1.6)+"px";
//alert("w:"+_content.style.width+",h:"+_content.style.height);
document.getElementById("face-empty-result").addEventListener("tap", function(){
_clipArea.style.width = (pWidth-40)+"px";
_clipArea.style.height = ((pWidth-40)/1.6)+"px";
_clipArea.style.top="1rem";
_clipArea.style.left="1rem";
getImage();
});
//注册拍照按钮的单击事件
document.getElementById("capture").addEventListener("click", function () {
//绘制画面
// alert("w:"+video.style.width+",h:"+video.style.height);
// context.drawImage(video,16,16,pWidth-20, (pHeight/2));
// context.drawImage(video,0,0,pWidth, pHeight);
document.getElementById("content").style.display="block";
document.getElementById("canvas").style.display="block";
document.getElementById("photograph").style.display="none";
document.getElementById("content_video").style.display="none";
document.getElementById("face-empty-result").style.display="none";
submit();
});
};
// 拍照
function getImage() {
//alert("调用摄像头");
document.getElementById("content").style.display="none";
document.getElementById("photograph").style.display="block";
document.getElementById("content_video").style.display="block";
// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
// 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
// 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先，如果有getUserMedia的话，就获得它
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
// 否则，为老的navigator.getUserMedia方法包裹一个Promise
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
//默认使用前摄像头，强制使用后置摄像头如下设置
let constraints = {video: { facingMode: {exact: "environment"}}};
// let constraints = {video: { width: { ideal: 1280 },height: { ideal: 720 },facingMode: {exact: "environment"}}};
// let constraints = {video: true};
navigator.mediaDevices.getUserMedia(constraints)
.then(function (stream) {
// 旧的浏览器可能没有srcObject
if ("srcObject" in video) {
video.srcObject = stream;
} else {
// 防止在新的浏览器里使用它，应为它已经不再支持了
video.src = window.URL.createObjectURL(stream);
}
video.onloadedmetadata = function (e) {
video.play();
};
}).catch(function (err) {
console.log(err.name + ": " + err.message);
});
}
/**
* 将图片压缩后返回base64格式的数据
* @param {*} width 压缩后图片宽度
* @param {*} height 压缩后图片高度
* @param {*} qua //图片质量1-100
*/
function compressImageTobase64(qua){
let quality = qua ? qua / 100 : 0.8;
let scale = 0.5;
context.width = video.videoWidth * scale;
context.height = video.videoHeight * scale;
// alert("长："+video.videoWidth * scale+",宽："+video.videoHeight * scale);
context.drawImage(video, 0, 0, context.width, context.height);
return canvas.toDataURL('image/png',quality);//base64 格式
}
//提交
function submit(){
let stasrTime = new Date();
// let plainText = 'ihep_公钥加密私钥解密1';
// alert('加密前数据:'+plainText);
// let plainText = canvas.toDataURL("image/png", 0.2);
let plainText = compressImageTobase64(50);
alert("图片长度："+plainText.length);
let publicKeyString = "0452712EBA7FE2C9615F6DE59C6EF662R085BD52B25952597CC95014BB8F201987F8D818EFFE710DBEC08FE2E4C7E3E0113EEBAB4B0E8B044E1A3CC8B149D76BE7";
const cipherMode = 1; // 1 - C1C3C2，0 - C1C2C3
let size = 1000; //分割每条最少长度
let plainArray = [];
// 我这里使用的是encryptlong进行RSA加密，是可以加密很长的字符串
if (plainText.length < size) {
let encrypted = sm2.doEncrypt(plainText, publicKeyString, cipherMode);
plainArray.push(encrypted);
}else {
let count = Math.ceil(plainText.length / size);
for (let i = 0; i <= count; i++) {
if (i === 0) {
plainArray.push(sm2.doEncrypt(plainText.substring(i, size), publicKeyString, cipherMode));
} else if (i > 0 && i < count) {
plainArray.push(sm2.doEncrypt(plainText.substring((i * size), (i + 1) * size), publicKeyString, cipherMode));
} else {
plainArray.push(sm2.doEncrypt(plainText.substring((i * size), plainText.length), publicKeyString, cipherMode));
}
}
}
//**解密**
// var decrypt = new JSEncrypt();
// decrypt.setPrivateKey(""); //设置私钥
// var uncrypted = decrypt.decrypt(encrypted); //使用私钥解密刚才用公钥加密的密文
// alert('解密后数据:'+uncrypted);
$.ajax({
async : false,
cache : false,
traditional: true,
url: '/verification2',
type: 'post',
dataType: 'text',
data: {
eparam:plainArray,
rid:"[[${rid}]]",
eparam2:plainText
},
cache: false,
async: true,
success: function (rs) {
let endTime = new Date();
alert("耗时："+((endTime-stasrTime)/1000)+"秒，\n\t返回结果："+rs);
console.log(plainText);
},error : function(e) { //请求失败的回调函数
alert("访问异常"+e.message);
}
});
}
</script>
</body>
</html>
卡死了，就是不能继续执行了