|
|
@@ -1,398 +1,466 @@
|
|
|
<template>
|
|
|
- <div style="width: 100%; height: calc(100% - 67.5px);background: #fff;">
|
|
|
- <div class="img">
|
|
|
- <div class="left">
|
|
|
- <div class="pFace">
|
|
|
- <img src="../assets/img/face.png" alt="" />
|
|
|
- </div>
|
|
|
- <div class="nav">{{ isdetected }}</div>
|
|
|
- </div>
|
|
|
- <div class="controlZ">
|
|
|
- <div id="screan" ref="dv">
|
|
|
- <img :src="img[0]" alt v-show="!isCamera" />
|
|
|
- <!--图片展示-->
|
|
|
- <video
|
|
|
- ref="video"
|
|
|
- id="video_cam"
|
|
|
- width="265"
|
|
|
- height="212"
|
|
|
- class="face"
|
|
|
- autoplay
|
|
|
- v-show="isCamera"
|
|
|
- ></video>
|
|
|
- <canvas
|
|
|
- ref="canvasDOM"
|
|
|
- width="265"
|
|
|
- height="212"
|
|
|
- class="kuang"
|
|
|
- v-show="isCamera"
|
|
|
- ></canvas>
|
|
|
- </div>
|
|
|
- <div id="tou" ref="dv1">
|
|
|
- <img :src="img[2]" alt />
|
|
|
- </div>
|
|
|
- <div id="ai" ref="dv2">
|
|
|
- <img :src="img[1]" alt />
|
|
|
- </div>
|
|
|
- <div id="police" ref="dv2">
|
|
|
- <img :src="img[3]" alt />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="cameraZ">
|
|
|
- <!--开启摄像头-->
|
|
|
- <div class="cameraBtn">
|
|
|
- <!-- <el-button
|
|
|
+ <div style="width: 100%; height: calc(100% - 67.5px);background: #fff;">
|
|
|
+ <div class="img">
|
|
|
+ <div class="left">
|
|
|
+ <div class="pFace">
|
|
|
+ <img src="../assets/img/face.png" alt />
|
|
|
+ </div>
|
|
|
+ <div class="nav">{{ isdetected }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="controlZ">
|
|
|
+ <div id="screan" ref="dv">
|
|
|
+ <img :src="img[0]" alt v-show="!isCamera" />
|
|
|
+ <!--图片展示-->
|
|
|
+ <video
|
|
|
+ ref="video"
|
|
|
+ id="video_cam"
|
|
|
+ width="265"
|
|
|
+ height="212"
|
|
|
+ class="face"
|
|
|
+ autoplay
|
|
|
+ v-show="isCamera"
|
|
|
+ ></video>
|
|
|
+ <canvas ref="canvasDOM" width="265" height="212" class="kuang" v-show="isCamera"></canvas>
|
|
|
+ </div>
|
|
|
+ <div id="tou" ref="dv1">
|
|
|
+ <img :src="img[2]" alt />
|
|
|
+ </div>
|
|
|
+ <div id="ai" ref="dv2">
|
|
|
+ <img :src="img[1]" alt />
|
|
|
+ </div>
|
|
|
+ <div id="police" ref="dv2">
|
|
|
+ <img :src="img[3]" alt />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cameraZ">
|
|
|
+ <!--开启摄像头-->
|
|
|
+ <div class="cameraBtn">
|
|
|
+ <!-- <el-button
|
|
|
size="mini"
|
|
|
type="primary"
|
|
|
@click="callCamera"
|
|
|
v-if="!isCamera"
|
|
|
- >开启摄像头</el-button -->
|
|
|
- <!-- > -->
|
|
|
- <div class="open" @click="callCamera" v-if="!isCamera">
|
|
|
- <img src="../assets/img/open.png" alt="" />
|
|
|
- </div>
|
|
|
- <!-- <el-button size="mini" type="primary" @click="closeCamera" v-else
|
|
|
+ >开启摄像头</el-button-->
|
|
|
+ <!-- > -->
|
|
|
+ <div class="open" @click="callCamera" v-if="!isCamera">
|
|
|
+ <img src="../assets/img/open.png" alt />
|
|
|
+ </div>
|
|
|
+ <!-- <el-button size="mini" type="primary" @click="closeCamera" v-else
|
|
|
>关闭摄像头</el-button
|
|
|
- > -->
|
|
|
- <div class="close" @click="closeCamera" v-else>
|
|
|
- <img src="../assets/img/close.png" alt="" />
|
|
|
- </div>
|
|
|
- <!-- <el-button
|
|
|
+ >-->
|
|
|
+ <div class="close" @click="closeCamera" v-else>
|
|
|
+ <img src="../assets/img/close.png" alt />
|
|
|
+ </div>
|
|
|
+ <!-- <el-button
|
|
|
size="mini"
|
|
|
type="primary"
|
|
|
@click="photograph"
|
|
|
v-if="isCamera"
|
|
|
>确认保存</el-button
|
|
|
- > -->
|
|
|
- <div class="save" @click="photograph" v-if="isCamera">
|
|
|
- <img src="../assets/img/save.png" alt="" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--确认-->
|
|
|
- <div v-if="isCamera" class="isPhoto">
|
|
|
- <!--canvas截取流-->
|
|
|
- <canvas
|
|
|
- ref="canvas"
|
|
|
- width="300"
|
|
|
- height="240"
|
|
|
- v-if="isCamera"
|
|
|
- ></canvas>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ >-->
|
|
|
+ <div class="save" @click="photograph" v-if="isCamera">
|
|
|
+ <img src="../assets/img/save.png" alt />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--确认-->
|
|
|
+ <div v-if="isCamera" class="isPhoto">
|
|
|
+ <!--canvas截取流-->
|
|
|
+ <canvas ref="canvas" width="300" height="240" v-if="isCamera"></canvas>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
- import tracking from "@/assets/js/tracking-min.js";
|
|
|
- import "@/assets/js/face-min.js";
|
|
|
-
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- that: this,
|
|
|
- img: [
|
|
|
- require("../assets/img/light/screan.png"),
|
|
|
- require("../assets/img/ai.png"),
|
|
|
- require("../assets/img/tou1.png"),
|
|
|
- require("../assets/img/policeNew.png"),
|
|
|
- ],
|
|
|
- isCamera: false,
|
|
|
- count: 0,
|
|
|
- isdetected: "请您保持脸部在画面中央",
|
|
|
- videoEl: {},
|
|
|
- canvasEL: {},
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 调用摄像头
|
|
|
- callCamera() {
|
|
|
- let _this = this;
|
|
|
- // H5调用电脑摄像头API
|
|
|
- navigator.mediaDevices
|
|
|
- .getUserMedia({
|
|
|
- video: true,
|
|
|
- })
|
|
|
- .then((success) => {
|
|
|
- _this.isCamera = true;
|
|
|
- // 摄像头开启成功
|
|
|
- _this.$refs["video"].srcObject = success;
|
|
|
- // 实时拍照效果
|
|
|
- _this.$refs["video"].play();
|
|
|
-
|
|
|
- if (_this.$store.state.function.indexOf("face=1;") != -1) {
|
|
|
- // this.$message.error("摄像头开启失败，请检查摄像头是否可用！");
|
|
|
-
|
|
|
- const video = this.videoEl;
|
|
|
- const canvas = this.canvasEL;
|
|
|
- const canvasContext = canvas.getContext("2d");
|
|
|
- let tracker = new window.tracking.ObjectTracker("face");
|
|
|
-
|
|
|
- // video.pause();
|
|
|
- // video.src = "";
|
|
|
- tracker.setInitialScale(4);
|
|
|
- tracker.setStepSize(2);
|
|
|
- tracker.setEdgesDensity(0.1);
|
|
|
- window.tracking.track("#video_cam", tracker, { camera: true });
|
|
|
- tracker.on("track", function (event) {
|
|
|
- const { autoCaptureTrackTraking } = _this;
|
|
|
- canvasContext.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
- event.data.forEach(function ({ x, y, width, height }) {
|
|
|
- canvasContext.strokeStyle = "#FFFF";
|
|
|
- canvasContext.strokeRect(x + 10, y - 30, width - 20, height);
|
|
|
- canvasContext.font = "11px Helvetica";
|
|
|
- canvasContext.fillStyle = "#fff";
|
|
|
- });
|
|
|
-
|
|
|
- if (!(event.data.length == 0) && _this.count <= 10) {
|
|
|
- if (_this.count < 0) _this.count = 0;
|
|
|
- _this.count += 1;
|
|
|
- if (_this.count > 10) {
|
|
|
- _this.isdetected = "已检测到人脸";
|
|
|
- }
|
|
|
- } else {
|
|
|
- _this.count -= 1;
|
|
|
- if (_this.count < 0)
|
|
|
- _this.isdetected = "请您保持脸部在画面中央";
|
|
|
- //this.isdetected = '已检测到人脸，正在登录'
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- })
|
|
|
- .catch((error) => {
|
|
|
- // console.error("摄像头开启失败，请检查摄像头是否可用！");
|
|
|
- _this.$message.error("摄像头开启失败，请检查摄像头是否可用！");
|
|
|
- });
|
|
|
- },
|
|
|
- // 拍照
|
|
|
- photograph() {
|
|
|
- let ctx = this.$refs["canvas"].getContext("2d");
|
|
|
- // 把当前视频帧内容渲染到canvas上
|
|
|
- ctx.drawImage(this.$refs["video"], 0, 0, 300, 240);
|
|
|
- // 转base64格式、图片格式转换、图片质量压缩
|
|
|
- let imgBase64 = this.$refs["canvas"].toDataURL("image/jpeg", 0.7); // 由字节转换为KB 判断大小
|
|
|
-
|
|
|
- let str = imgBase64.replace("data:image/jpeg;base64,", "");
|
|
|
- let strLength = str.length;
|
|
|
- let fileLength = parseInt(strLength - (strLength / 8) * 2); // 图片尺寸 用于判断
|
|
|
- let size = (fileLength / 1024).toFixed(2);
|
|
|
- console.log(size); // 上传拍照信息 调用接口上传图片 .........
|
|
|
-
|
|
|
- // 保存到本地
|
|
|
- // this.isCamera = false;
|
|
|
- let ADOM = document.createElement("a");
|
|
|
- ADOM.href = imgBase64;
|
|
|
- ADOM.download = new Date().getTime() + ".jpeg";
|
|
|
- ADOM.click();
|
|
|
- this.$message({
|
|
|
- message: "保存成功",
|
|
|
- type: "success",
|
|
|
- });
|
|
|
- },
|
|
|
- // 关闭摄像头
|
|
|
- closeCamera() {
|
|
|
- if (!this.$refs["video"].srcObject) {
|
|
|
- this.isCamera = false;
|
|
|
- return;
|
|
|
- }
|
|
|
- let stream = this.$refs["video"].srcObject;
|
|
|
- let tracks = stream.getTracks();
|
|
|
- tracks.forEach((track) => {
|
|
|
- track.stop();
|
|
|
- });
|
|
|
- this.$refs["video"].srcObject = null;
|
|
|
- this.isCamera = false;
|
|
|
- },
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- // console.log(this.$store.state.function);
|
|
|
- // var _s3 = document.createElement("script");
|
|
|
- // _s3.src = "/static/materialize/jquery-2.1.3.min.js";
|
|
|
- // _s3.type = "text/javascript";
|
|
|
- // document.head.appendChild(_s3);
|
|
|
- // var _s2 = document.createElement("script");
|
|
|
- // _s2.src = "/static/camera.283d5d54.js";
|
|
|
- // _s2.type = "text/javascript";
|
|
|
- // document.head.appendChild(_s2);
|
|
|
- // var _s1 = document.createElement("script");
|
|
|
- // _s1.src = "/static/bundle.js";
|
|
|
- // _s1.type = "text/javascript";
|
|
|
- // document.head.appendChild(_s1);
|
|
|
- // console.log(this.$store.state.function);
|
|
|
- if (this.$store.state.function.indexOf("screen=1;") != -1) {
|
|
|
- // this.$message.error("摄像头开启失败，请检查摄像头是否可用！");
|
|
|
- this.callCamera();
|
|
|
- }
|
|
|
- this.videoEl = this.$refs.video;
|
|
|
- this.canvasEL = this.$refs.canvasDOM;
|
|
|
- },
|
|
|
- };
|
|
|
+import tracking from "@/assets/js/tracking-min.js";
|
|
|
+import "@/assets/js/face-min.js";
|
|
|
+import * as faceapi from "face-api.js";
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ that: this,
|
|
|
+ img: [
|
|
|
+ require("../assets/img/light/screan.png"),
|
|
|
+ require("../assets/img/ai.png"),
|
|
|
+ require("../assets/img/tou1.png"),
|
|
|
+ require("../assets/img/policeNew.png")
|
|
|
+ ],
|
|
|
+ isCamera: false,
|
|
|
+ count: 0,
|
|
|
+ isdetected: "请您保持脸部在画面中央",
|
|
|
+ videoEl: {},
|
|
|
+ canvasEL: {},
|
|
|
+ // 预设样本图，支持本地，网络，beas64
|
|
|
+ sampleArr: [
|
|
|
+ // {
|
|
|
+ // name: "编号1",
|
|
|
+ // img: []
|
|
|
+ // }
|
|
|
+ ],
|
|
|
+ // 匹配图，支持本地，网络，beas64
|
|
|
+ detArr: [
|
|
|
+
|
|
|
+ ],
|
|
|
+ // 匹配结果
|
|
|
+ resultArr: [],
|
|
|
+ // 人脸匹配矩阵数组对象转码结果
|
|
|
+ faceMatcher: null
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 调用摄像头
|
|
|
+ callCamera() {
|
|
|
+ let _this = this;
|
|
|
+ // H5调用电脑摄像头API
|
|
|
+ navigator.mediaDevices
|
|
|
+ .getUserMedia({
|
|
|
+ video: true
|
|
|
+ })
|
|
|
+ .then(success => {
|
|
|
+ _this.isCamera = true;
|
|
|
+ // 摄像头开启成功
|
|
|
+ _this.$refs["video"].srcObject = success;
|
|
|
+ // 实时拍照效果
|
|
|
+ _this.$refs["video"].play();
|
|
|
+
|
|
|
+ if (_this.$store.state.function.indexOf("face=1;") != -1) {
|
|
|
+ // this.$message.error("摄像头开启失败，请检查摄像头是否可用！");
|
|
|
+
|
|
|
+ const video = this.videoEl;
|
|
|
+ const canvas = this.canvasEL;
|
|
|
+ const canvasContext = canvas.getContext("2d");
|
|
|
+ let tracker = new window.tracking.ObjectTracker("face");
|
|
|
+
|
|
|
+ // video.pause();
|
|
|
+ // video.src = "";
|
|
|
+ tracker.setInitialScale(4);
|
|
|
+ tracker.setStepSize(2);
|
|
|
+ tracker.setEdgesDensity(0.1);
|
|
|
+ window.tracking.track("#video_cam", tracker, { camera: true });
|
|
|
+ tracker.on("track", function(event) {
|
|
|
+ const { autoCaptureTrackTraking } = _this;
|
|
|
+ canvasContext.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
+ event.data.forEach(function({ x, y, width, height }) {
|
|
|
+ canvasContext.strokeStyle = "#FFFF";
|
|
|
+ canvasContext.strokeRect(x + 10, y - 30, width - 20, height);
|
|
|
+ canvasContext.font = "11px Helvetica";
|
|
|
+ canvasContext.fillStyle = "#fff";
|
|
|
+ });
|
|
|
+
|
|
|
+ if (!(event.data.length == 0) && _this.count <= 10) {
|
|
|
+ if (_this.count < 0) _this.count = 0;
|
|
|
+ _this.count += 1;
|
|
|
+ if (_this.count > 10) {
|
|
|
+ _this.isdetected = "已检测到人脸";
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ _this.count -= 1;
|
|
|
+ if (_this.count < 0)
|
|
|
+ _this.isdetected = "请您保持脸部在画面中央";
|
|
|
+ //this.isdetected = '已检测到人脸，正在登录'
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ // console.error("摄像头开启失败，请检查摄像头是否可用！");
|
|
|
+ _this.$message.error("摄像头开启失败，请检查摄像头是否可用！");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 拍照
|
|
|
+ photograph() {
|
|
|
+ let ctx = this.$refs["canvas"].getContext("2d");
|
|
|
+ // 把当前视频帧内容渲染到canvas上
|
|
|
+ ctx.drawImage(this.$refs["video"], 0, 0, 300, 240);
|
|
|
+ // 转base64格式、图片格式转换、图片质量压缩
|
|
|
+ let imgBase64 = this.$refs["canvas"].toDataURL("image/jpeg", 0.7); // 由字节转换为KB 判断大小
|
|
|
+
|
|
|
+ let str = imgBase64.replace("data:image/jpeg;base64,", "");
|
|
|
+ let strLength = str.length;
|
|
|
+ let fileLength = parseInt(strLength - (strLength / 8) * 2); // 图片尺寸 用于判断
|
|
|
+ let size = (fileLength / 1024).toFixed(2);
|
|
|
+ console.log(size); // 上传拍照信息 调用接口上传图片 .........
|
|
|
+
|
|
|
+ // 保存到本地
|
|
|
+ // this.isCamera = false;
|
|
|
+ let ADOM = document.createElement("a");
|
|
|
+ ADOM.href = imgBase64;
|
|
|
+ ADOM.download = new Date().getTime() + ".jpeg";
|
|
|
+ ADOM.click();
|
|
|
+ this.$message({
|
|
|
+ message: "保存成功",
|
|
|
+ type: "success"
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 关闭摄像头
|
|
|
+ closeCamera() {
|
|
|
+ if (!this.$refs["video"].srcObject) {
|
|
|
+ this.isCamera = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let stream = this.$refs["video"].srcObject;
|
|
|
+ let tracks = stream.getTracks();
|
|
|
+ tracks.forEach(track => {
|
|
|
+ track.stop();
|
|
|
+ });
|
|
|
+ this.$refs["video"].srcObject = null;
|
|
|
+ this.isCamera = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 初始化模型加载,匹配矩阵
|
|
|
+ async fnInit() {
|
|
|
+ // 加载模型
|
|
|
+ await faceapi.loadFaceRecognitionModel("/models");
|
|
|
+ // 生成人脸匹配矩阵数组对象，样本图片同步转码
|
|
|
+ const labeledFaceDescriptors = await Promise.all(
|
|
|
+ this.sampleArr.map(async item => {
|
|
|
+ // 临时图片转码数据，将图片对象转数据矩阵对象
|
|
|
+ let descriptors = [];
|
|
|
+ for (let image of item.img) {
|
|
|
+ const imageEl = await faceapi.fetchImage(image);
|
|
|
+ descriptors.push(await faceapi.computeFaceDescriptor(imageEl));
|
|
|
+ }
|
|
|
+ // 返回图片用户和图片转码数组
|
|
|
+ return new faceapi.LabeledFaceDescriptors(item.name, descriptors);
|
|
|
+ })
|
|
|
+ );
|
|
|
+ // 人脸匹配矩阵数组对象转码结果
|
|
|
+ this.faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors);
|
|
|
+ },
|
|
|
+ // 执行遍历识别匹配图片，数值误差越小越精确
|
|
|
+ fnRun() {
|
|
|
+ this.detArr.forEach(async img => {
|
|
|
+ let ts = Date.now();
|
|
|
+ // 将图片对象转数据矩阵对象，进行匹配
|
|
|
+ const inputEl = await faceapi.fetchImage(img);
|
|
|
+ const inputDescriptor = await faceapi.computeFaceDescriptor(inputEl);
|
|
|
+ const bestMatch = await this.faceMatcher.findBestMatch(inputDescriptor);
|
|
|
+ // 结果
|
|
|
+ this.resultArr.push({
|
|
|
+ target: img,
|
|
|
+ result: bestMatch.toString(),
|
|
|
+ time: Date.now() - ts + "ms",
|
|
|
+ fps: Math.round(1000 / (Date.now() - ts))
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 更换匹配图
|
|
|
+ async fnChange(e) {
|
|
|
+ if (!e.target.files.length) return;
|
|
|
+ this.detArr = [];
|
|
|
+ this.resultArr = [];
|
|
|
+ // 将文件显示为图像并识别
|
|
|
+ e.target.files.forEach(async file => {
|
|
|
+ let ts = Date.now();
|
|
|
+ let img = await faceapi.bufferToImage(file);
|
|
|
+ const inputDescriptor = await faceapi.computeFaceDescriptor(img);
|
|
|
+ const bestMatch = await this.faceMatcher.findBestMatch(inputDescriptor);
|
|
|
+ // 结果
|
|
|
+ this.detArr.push(img.src);
|
|
|
+ this.resultArr.push({
|
|
|
+ target: file.name,
|
|
|
+ result: bestMatch.toString(),
|
|
|
+ time: Date.now() - ts + "ms",
|
|
|
+ fps: Math.round(1000 / (Date.now() - ts))
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // console.log(this.$store.state.function);
|
|
|
+ // var _s3 = document.createElement("script");
|
|
|
+ // _s3.src = "/static/materialize/jquery-2.1.3.min.js";
|
|
|
+ // _s3.type = "text/javascript";
|
|
|
+ // document.head.appendChild(_s3);
|
|
|
+ // var _s2 = document.createElement("script");
|
|
|
+ // _s2.src = "/static/camera.283d5d54.js";
|
|
|
+ // _s2.type = "text/javascript";
|
|
|
+ // document.head.appendChild(_s2);
|
|
|
+ // var _s1 = document.createElement("script");
|
|
|
+ // _s1.src = "/static/bundle.js";
|
|
|
+ // _s1.type = "text/javascript";
|
|
|
+ // document.head.appendChild(_s1);
|
|
|
+ // console.log(this.$store.state.function);
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.fnInit().then(() => this.fnRun());
|
|
|
+ });
|
|
|
+
|
|
|
+ if (this.$store.state.function.indexOf("screen=1;") != -1) {
|
|
|
+ // this.$message.error("摄像头开启失败，请检查摄像头是否可用！");
|
|
|
+ this.callCamera();
|
|
|
+ }
|
|
|
+ this.videoEl = this.$refs.video;
|
|
|
+ this.canvasEL = this.$refs.canvasDOM;
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- html,
|
|
|
- body {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .tip {
|
|
|
- margin: 25px 0 30px 20px;
|
|
|
- width: 419px;
|
|
|
- }
|
|
|
-
|
|
|
- .tip > img,
|
|
|
- #screan > img,
|
|
|
- #tou > img,
|
|
|
- #ai > img,
|
|
|
- #police > img,
|
|
|
- .right > img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- user-select: none;
|
|
|
- }
|
|
|
-
|
|
|
- .img {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: flex-start;
|
|
|
- justify-content: center;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- #screan {
|
|
|
- width: 230px;
|
|
|
- position: absolute;
|
|
|
- z-index: 5;
|
|
|
- top: 156px;
|
|
|
- left: 108.3px;
|
|
|
- }
|
|
|
-
|
|
|
- #ai {
|
|
|
- width: 230px;
|
|
|
- position: absolute;
|
|
|
- z-index: 3;
|
|
|
- top: 155px;
|
|
|
- left: 110px;
|
|
|
- }
|
|
|
-
|
|
|
- #tou {
|
|
|
- width: 70px;
|
|
|
- position: absolute;
|
|
|
- z-index: 4;
|
|
|
- top: 118px;
|
|
|
- left: 190px;
|
|
|
- }
|
|
|
-
|
|
|
- #police {
|
|
|
- width: 382px;
|
|
|
- position: absolute;
|
|
|
- z-index: 2;
|
|
|
- top: 30px;
|
|
|
- left: 35px;
|
|
|
- }
|
|
|
-
|
|
|
- .button {
|
|
|
- color: #fff;
|
|
|
- background: #8ca1de;
|
|
|
- width: 550px;
|
|
|
- height: 55px;
|
|
|
- font-size: 20px;
|
|
|
- text-align: center;
|
|
|
- line-height: 55px;
|
|
|
- position: absolute;
|
|
|
- bottom: 10%;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- user-select: none;
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- width: 40px;
|
|
|
- position: absolute;
|
|
|
- left: 55%;
|
|
|
- top: 70%;
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- .dark {
|
|
|
- background: #5b79d0;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .controlZ {
|
|
|
- width: 490px;
|
|
|
- height: 900px;
|
|
|
- /* margin-left: calc(50% - (490px / 2)); */
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .cameraZ {
|
|
|
- display: flex;
|
|
|
- height: 340px;
|
|
|
- flex-direction: column;
|
|
|
- flex-wrap: nowrap;
|
|
|
- width: 300px;
|
|
|
- }
|
|
|
-
|
|
|
- .cameraBtn {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .cameraBtn button {
|
|
|
- margin: 0 0 10px 0;
|
|
|
- }
|
|
|
-
|
|
|
- .face {
|
|
|
- position: absolute;
|
|
|
- z-index: 1;
|
|
|
- padding: 26.5px 0;
|
|
|
- }
|
|
|
-
|
|
|
- .kuang {
|
|
|
- padding: 26.5px 0;
|
|
|
- position: absolute;
|
|
|
- z-index: 2;
|
|
|
- }
|
|
|
-
|
|
|
- .left {
|
|
|
- margin: 300px 130px 0 0;
|
|
|
- }
|
|
|
-
|
|
|
- .pFace {
|
|
|
- width: 200px;
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
-
|
|
|
- .close > img,
|
|
|
- .save > img,
|
|
|
- .pFace > img,
|
|
|
- .open > img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .cameraBtn {
|
|
|
- margin-top: 80px;
|
|
|
- }
|
|
|
-
|
|
|
- .close {
|
|
|
- margin-bottom: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .isPhoto {
|
|
|
- padding: 20px 0 0 0;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
-
|
|
|
- .nav {
|
|
|
- text-align: center;
|
|
|
- font-size: 32px;
|
|
|
- color: #ccc;
|
|
|
- }
|
|
|
+html,
|
|
|
+body {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.tip {
|
|
|
+ margin: 25px 0 30px 20px;
|
|
|
+ width: 419px;
|
|
|
+}
|
|
|
+
|
|
|
+.tip > img,
|
|
|
+#screan > img,
|
|
|
+#tou > img,
|
|
|
+#ai > img,
|
|
|
+#police > img,
|
|
|
+.right > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ user-select: none;
|
|
|
+}
|
|
|
+
|
|
|
+.img {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+#screan {
|
|
|
+ width: 230px;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 5;
|
|
|
+ top: 156px;
|
|
|
+ left: 108.3px;
|
|
|
+}
|
|
|
+
|
|
|
+#ai {
|
|
|
+ width: 230px;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 3;
|
|
|
+ top: 155px;
|
|
|
+ left: 110px;
|
|
|
+}
|
|
|
+
|
|
|
+#tou {
|
|
|
+ width: 70px;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 4;
|
|
|
+ top: 118px;
|
|
|
+ left: 190px;
|
|
|
+}
|
|
|
+
|
|
|
+#police {
|
|
|
+ width: 382px;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2;
|
|
|
+ top: 30px;
|
|
|
+ left: 35px;
|
|
|
+}
|
|
|
+
|
|
|
+.button {
|
|
|
+ color: #fff;
|
|
|
+ background: #8ca1de;
|
|
|
+ width: 550px;
|
|
|
+ height: 55px;
|
|
|
+ font-size: 20px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 55px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ user-select: none;
|
|
|
+}
|
|
|
+
|
|
|
+.right {
|
|
|
+ width: 40px;
|
|
|
+ position: absolute;
|
|
|
+ left: 55%;
|
|
|
+ top: 70%;
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.dark {
|
|
|
+ background: #5b79d0;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.controlZ {
|
|
|
+ width: 490px;
|
|
|
+ height: 900px;
|
|
|
+ /* margin-left: calc(50% - (490px / 2)); */
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.cameraZ {
|
|
|
+ display: flex;
|
|
|
+ height: 340px;
|
|
|
+ flex-direction: column;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ width: 300px;
|
|
|
+}
|
|
|
+
|
|
|
+.cameraBtn {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.cameraBtn button {
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.face {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+ padding: 26.5px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.kuang {
|
|
|
+ padding: 26.5px 0;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2;
|
|
|
+}
|
|
|
+
|
|
|
+.left {
|
|
|
+ margin: 300px 130px 0 0;
|
|
|
+}
|
|
|
+
|
|
|
+.pFace {
|
|
|
+ width: 200px;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.close > img,
|
|
|
+.save > img,
|
|
|
+.pFace > img,
|
|
|
+.open > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.cameraBtn {
|
|
|
+ margin-top: 80px;
|
|
|
+}
|
|
|
+
|
|
|
+.close {
|
|
|
+ margin-bottom: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.isPhoto {
|
|
|
+ padding: 20px 0 0 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.nav {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 32px;
|
|
|
+ color: #ccc;
|
|
|
+}
|
|
|
</style>
|
root