UPDATE

0fd8ea92 · 62f378412b7489745d885e7f · e6db359a · 0fd8ea92 · e6db359a · 0fd8ea92
显示空白变更内容
内联并排

Showing with 259 addition and 10 deletion

index.html index.html +148 -5

script.js script.js +0 -0

style.css style.css +111 -5

未找到文件。
--- a/index.html
+++ b/index.html
@@ -5,13 +5,156 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
 <body>
-    <div class="container">
-        <img src="src/assets/logo.svg" alt="InsCode">
-        <div>欢迎来到 InsCode</div>
+    <div id="app">
+        <div class="publish">
+            <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>
-    <script src="script.js"></script>
+            </div>
+            <div @click="setImage" class="submit d_btn center">确认采集</div>
+        </div>
+    </div>
+    <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>
 </html>
\ No newline at end of file
--- a/script.js
+++ b/script.js
--- a/style.css
+++ b/style.css
-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%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 100;
+
+}
+
+.publish .user .user_box video {
  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 {
-  text-align: center;
-  padding: 64px;
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
\ No newline at end of file