|
|
@@ -1,6 +1,13 @@ |
|
|
|
<template> |
|
|
|
<div class="page"> |
|
|
|
<div class="bottom"> |
|
|
|
<!-- 人物框 --> |
|
|
|
<!-- <image |
|
|
|
v-if="!isSuccess" |
|
|
|
class="frameImg" |
|
|
|
src="../../assets/img/people.png" |
|
|
|
mode="scaleToFill" |
|
|
|
/> --> |
|
|
|
<video |
|
|
|
v-if="!isSuccess" |
|
|
|
id="video" |
|
|
@@ -14,8 +21,11 @@ |
|
|
|
<img src="../../assets/img/selectImg.png" /> |
|
|
|
<div class="uploadText">上传照片</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div id="action" @click="takePicture"> |
|
|
|
<view v-show="showTakeTips" class="takeTips1">请把脸面向摄像头</view> |
|
|
|
<view v-show="showTakeTips" class="takeTips2" |
|
|
|
>点击三秒后开始拍照 |
|
|
|
</view> |
|
|
|
<div class="circleInside"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@@ -110,6 +120,8 @@ const getView = () => { |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
const showTakeTips = ref(true); |
|
|
|
|
|
|
|
const startCamera = () => { |
|
|
|
function getUserMedia(constraints, success, error) { |
|
|
|
if (navigator.mediaDevices.getUserMedia) { |
|
|
@@ -142,6 +154,8 @@ const startCamera = () => { |
|
|
|
} |
|
|
|
|
|
|
|
const video = document.querySelector("video.uni-video-video"); |
|
|
|
// video.style.transform = "scaleX(-1)"; |
|
|
|
// video.style.transform = "rotateY(180deg)"; //镜像 |
|
|
|
let canvas = document.querySelector("canvas.uni-canvas-canvas"); |
|
|
|
const action = document.querySelector("#action"); |
|
|
|
let context = canvas.getContext("2d"); |
|
|
@@ -189,8 +203,9 @@ const startCamera = () => { |
|
|
|
} |
|
|
|
|
|
|
|
action.addEventListener("click", function () { |
|
|
|
showTakeTips.value = false; |
|
|
|
uni.showToast({ |
|
|
|
title: "准备好了吗?", |
|
|
|
title: "准备开始拍照", |
|
|
|
icon: "success", |
|
|
|
}); |
|
|
|
setTimeout(() => { |
|
|
@@ -212,13 +227,14 @@ const startCamera = () => { |
|
|
|
canvas.height = 1500; |
|
|
|
context.drawImage(video, 0, 0); |
|
|
|
let dataURL = canvas.toDataURL("image/png"); |
|
|
|
console.log(dataURL); |
|
|
|
// console.log(dataURL); |
|
|
|
CimgSrc.value = dataURL; |
|
|
|
UimgSrc.value = ""; |
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
isShowCanvas.value = false; |
|
|
|
isSuccess.value = true; |
|
|
|
showTakeTips.value = true; |
|
|
|
}, 10); |
|
|
|
}, 1000); |
|
|
|
} |
|
|
@@ -627,6 +643,18 @@ onUnload(() => { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
:deep(.uni-toast) { |
|
|
|
width: 300rpx; |
|
|
|
font-size: 50rpx; |
|
|
|
font-weight: 900; |
|
|
|
padding: 20rpx 30rpx; |
|
|
|
color: #ff4f00; |
|
|
|
|
|
|
|
.uni-toast__icon { |
|
|
|
width: 50rpx !important; |
|
|
|
height: 50rpx !important; |
|
|
|
} |
|
|
|
} |
|
|
|
.page { |
|
|
|
width: 100vw; |
|
|
|
height: 100vh; |
|
|
@@ -674,6 +702,15 @@ onUnload(() => { |
|
|
|
width: 100%; |
|
|
|
height: 68%; |
|
|
|
overflow: hidden; |
|
|
|
.frameImg { |
|
|
|
position: absolute; |
|
|
|
top: 40%; |
|
|
|
left: 50%; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
width: 60%; |
|
|
|
height: 40%; |
|
|
|
z-index: 3; |
|
|
|
} |
|
|
|
video { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
@@ -724,6 +761,24 @@ onUnload(() => { |
|
|
|
background-color: #ffffff; |
|
|
|
border-radius: 60rpx; |
|
|
|
z-index: 99; |
|
|
|
.takeTips1 { |
|
|
|
position: absolute; |
|
|
|
width: 300rpx; |
|
|
|
top: -70rpx; |
|
|
|
left: 50%; |
|
|
|
transform: translateX(-50%); |
|
|
|
text-align: center; |
|
|
|
color: #ff4f00; |
|
|
|
} |
|
|
|
.takeTips2 { |
|
|
|
position: absolute; |
|
|
|
width: 300rpx; |
|
|
|
top: -40rpx; |
|
|
|
left: 50%; |
|
|
|
transform: translateX(-50%); |
|
|
|
text-align: center; |
|
|
|
color: #ff4f00; |
|
|
|
} |
|
|
|
.circleInside { |
|
|
|
position: absolute; |
|
|
|
left: 50%; |
|
|
|