Skip to content

H
HTML-CSS-JS

wsqzero0 / HTML-CSS-JS
与 Fork 源项目一致

Fork自 inscode / HTML-CSS-JS

通知 1
Star 1
Fork 0
H
HTML-CSS-JS
提交 0fd8ea92 编写于 作者: 6 62f378412b7489745d885e7f
浏览文件
操作

UPDATE

上级 e6db359a
隐藏空白更改
内联 并排
Showing with 259 addition and 10 deletion
index.html
浏览文件 @ 0fd8ea92
...@@ -5,13 +5,156 @@ ...@@ -5,13 +5,156 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" />
<title>InsCode</title> <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<title>面部照片收集</title>
</head> </head>
<body> <body>
<div class="container"> <div id="app">
<img src="src/assets/logo.svg" alt="InsCode"> <div class="publish">
<div>欢迎来到 InsCode</div> <div class="title center">面部照片收集</div>
<div class="user">
<div class="user_box">
<video width="251" height="361" id="video" ref="video" playsinline webkit-playsinline></video>
<canvas style="display: none" width="251" height="361" id="canvasCamera"></canvas>
</div>
</div>
<div @click="setImage" class="submit d_btn center">确认采集</div>
</div>
</div> </div>
<script src="script.js"></script> <script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt =
"orientationchange" in window ? "orientationchange" : "resize",
recalc = function () {
var clientWidth = docEl.clientWidth;
// if(clientWidth > 1024 ){
// clientWidth = 375
// }
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + "px";
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
recalc();
})(document, window);
// 新建一个Vue对象
const vm = new Vue({
// el是element的缩写，#app是id选择器
el: '#app',
// 页面使用的变量需要在data中注册（定义）
data: {
mediaStreamTrack: {},
video_stream: "", // 视频stream
imgSrc: "", // 拍照图片
canvas: null,
context: null,
err: "",
streamIns: "",
URL: "",
},
created() {
},
mounted() {
// 进入页面 自动调用摄像头
this.getUserMedia(
{
//摄像头拍摄的区域
video: {
// width: { min: 640, ideal: 1920, max: 1920 },
// height: { min: 640, ideal: 1330 },
width: { min: 420, ideal: 500, max: 1920 },
height: { min: 420, ideal: 1920 },
facingMode: "user",
},
audio: false
},
this.success,
this.error
);
},
methods: {
success(stream) {
this.streamIns = stream;
const video = document.getElementById("video"); // webkit内核浏览器
this.URL = window.URL || window.webkitURL;
if ("srcObject" in video) {
video.srcObject = stream;
} else {
video.src = this.URL.createObjectURL(stream);
} // 苹果手机的系统弹框会阻止js的线程的继续执行 手动0.1秒之后自动执行代码
setTimeout(() => {
video.play();
}, 100);
},
error(e) {
console.log(e);
this.scanTip = "访问用户媒体失败";
},
getUserMedia(constrains, success, error) {
const supported = navigator.mediaDevices.getSupportedConstraints();
this.canvas = document.getElementById("canvasCamera");
this.context = this.canvas.getContext("2d");
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia) {
//最新标准API
navigator.mediaDevices
.getUserMedia(constrains)
.then(success)
.catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit内核浏览器
navigator.webkitGetUserMedia(constrains).then(success).catch(error);
} else if (navigator.mozGetUserMedia) {
//Firefox浏览器
navigator.mozGetUserMedia(constrains).then(success).catch(error);
} else if (navigator.getUserMedia) {
//旧版API
navigator.getUserMedia(constrains).then(success).catch(error);
} else {
this.scanTip = "你的浏览器不支持访问用户媒体设备";
}
},
// 拍照 绘制图片
setImage() {
// 点击canvas画图
this.context.drawImage(this.$refs.video, 0, 0, 251, 361);
console.log("拍照", this.context.drawImage);
// 获取图片base64链接 canvas
this.canvas.style.display = "block";
console.log(this.canvas, "拍照 image ", this.canvas.style);
const image = this.canvas.toDataURL("image/png");
this.imgSrc = image;
console.log(this.imgSrc, "拍照 image ", image);
if (this.imgSrc) {
this.showPhoto = true;
}
// this.$emit("refreshDataList", this.imgSrc);
},
dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(",");
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
},
},
})
</script>
</body> </body>
</html> </html>
\ No newline at end of file
style.css
浏览文件 @ 0fd8ea92
html, * {
body { padding: 0;
margin: 0;
}
.publish {
width: 100%;
min-height: 100vh;
background: #770609;
background-size: 100% 100%;
background-repeat: no-repeat;
box-sizing: border-box;
padding-top: 0.62rem;
}
.publish .user {
width: 5.02rem;
height: 7.22rem;
box-sizing: border-box;
margin: 0 auto 0.28rem auto;
}
.publish .user .user_box {
width: 100%;
height: 100%;
position: relative;
}
.publish .user .user_box .logo {
width: 100%;
height: 100%; height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
.publish .user .user_box video {
width: 100%; width: 100%;
height: 100%;
/* object-fit: fill; */
}
.publish .user .user_box canvas {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 101;
}
.tips {
width: 5.02rem;
margin: 0 auto;
display: flex;
align-items: center;
}
.tips img {
width: 0.36rem;
height: 0.36rem;
}
.tips span {
font-size: 0.28rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 0.5rem;
margin-left: 0.1rem;
}
.submit {
width: 3rem;
height: 0.8rem;
font-size: 0.32rem;
margin: 0.9rem auto 0 auto;
}
.img_bg_camera img {
width: 5.02rem;
height: 7.22rem;
}
.title {
width: 4.26rem;
height: 0.74rem;
background-size: 100% 100%;
background-repeat: no-repeat;
margin: 0 auto;
font-size: 0.34rem;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #ffffff;
line-height: 0.48rem;
letter-spacing: 0.05rem;
margin-bottom: 0.9rem;
}
.d_btn {
width: 2.68rem;
height: 0.76rem;
background: #7e1615;
border-radius: 0.38rem;
border: 1px solid #e33547;
color: #fff;
} }
.container { .center {
text-align: center; display: flex;
padding: 64px; align-items: center;
justify-content: center;
} }
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或