|
- <template>
- <div class="page">
- <div class="top">
- <div class="example">
- <div>文案与模板提示区域</div>
- </div>
- <div class="model">
- <img :src="modelUrl" alt="" />
- </div>
- </div>
-
- <div class="bottom">
- <video
- v-if="!isSuccess"
- id="video"
- muted
- autoplay="autoplay"
- :controls="false"
- ></video>
-
- <div v-if="!isSuccess">
- <div class="selectImg" @click="uploadImg">
- <img src="../../assets/img/selectImg.png" />
- <div class="uploadText">上传照片</div>
- </div>
-
- <div id="action" @click="takePicture">
- <div class="circleInside"></div>
- </div>
- </div>
-
- <div v-if="isSuccess">
- <div class="selectImg" @click="uploadImg">
- <img src="../../assets/img/selectImg.png" />
- <div class="uploadText">上传照片</div>
- </div>
-
- <div class="confirm" @click="confirmPhoto">
- <img src="../../assets/img/success.png" />
- <div class="uploadText">就这张了</div>
- </div>
-
- <div class="reTry" @click="reTry">
- <img src="../../assets/img/reTry.png" />
- <div class="uploadText">重新拍摄</div>
- </div>
- </div>
-
- <canvas
- v-if="isShowCanvas"
- id="canvas"
- style="width: 1530; height: 950"
- ></canvas>
-
- <div v-if="isSuccess" class="preview">
- <img v-if="!isUpload" class="fromCamera" :src="CimgSrc" />
- <img v-if="isUpload" class="fromUpload" :src="UimgSrc" />
- </div>
- </div>
- <!-- Top section -->
- <u-overlay class="overlay" :show="showQrCode" opacity="0.9">
- <view class="content">
- <view class="imageBox">
- <image :src="QRCodeUrl" mode="scaleToFill" />
- </view>
- <text>打开微信扫码上传照片</text>
- <view class="orangeBtn" style="margin-top: 100rpx" @click="cancelUplaod"
- >取 消</view
- >
- </view>
- </u-overlay>
- </div>
- </template>
-
- <script setup>
- import { ref, onMounted } from "vue";
- import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
-
- import { getImageQrcode, findImage } from "../../api/camera.js";
-
- let CimgSrc = ref(""); // 相机拍照的图片路径,上传前需校验
- let UimgSrc = ref(""); // 用户上传的图片路径,上传无需校验
- let isSuccess = ref(false);
- let isShowCanvas = ref(true);
- let isUpload = ref(false);
-
- let modelUrl = ref("");
-
- let QRCodeUrl = ref("");
- let showQrCode = ref(false);
-
- let timer = ref(null);
-
- const startCamera = () => {
- function getUserMedia(constraints, success, error) {
- if (navigator.mediaDevices.getUserMedia) {
- //最新的标准API
- navigator.mediaDevices
- .getUserMedia({
- audio: {
- echoCancellation: true,
- },
- video: {
- facingMode: "user",
- },
- })
- .then(success)
- .catch(error);
- } else if (navigator.webkitGetUserMedia) {
- //webkit核心浏览器
- navigator.webkitGetUserMedia(constraints, success, error);
- } else if (navigator.mozGetUserMedia) {
- //firfox浏览器
- navigator.mozGetUserMedia(constraints, success, error);
- } else if (navigator.getUserMedia) {
- //旧版API
- navigator.getUserMedia(constraints, success, error);
- }
- }
-
- const video = document.querySelector("video.uni-video-video");
- let canvas = document.querySelector("canvas.uni-canvas-canvas");
- const action = document.querySelector("#action");
- let context = canvas.getContext("2d");
-
- function success(stream) {
- //兼容webkit核心浏览器
- let CompatibleURL = window.URL || window.webkitURL;
- //将视频流设置为video元素的源
- console.log(stream);
-
- //video.src = CompatibleURL.createObjectURL(stream);
- video.srcObject = stream;
- video.play();
- }
-
- function error(error) {
- console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
- }
-
- if (
- navigator.mediaDevices.getUserMedia ||
- navigator.getUserMedia ||
- navigator.webkitGetUserMedia ||
- navigator.mozGetUserMedia
- ) {
- //调用用户媒体设备, 访问摄像头
- getUserMedia(
- {
- audio: false,
- video: true,
- },
- success,
- error
- );
- } else {
- alert("不支持访问用户媒体");
- }
-
- action.addEventListener("click", function () {
- uni.showToast({
- title: "准备好了吗?",
- icon: "success",
- });
- setTimeout(() => {
- let i = 3;
- const timer = setInterval(() => {
- uni.showLoading({
- title: i,
- });
- i--;
- console.log(i);
- if (i == 0) {
- clearInterval(timer);
-
- setTimeout(() => {
- uni.hideLoading();
- canvas.width = 1530;
- canvas.height = 950;
- context.drawImage(video, 0, 0);
- const dataURL = canvas.toDataURL("image/png");
- CimgSrc.value = dataURL;
- UimgSrc.value = "";
- setTimeout(() => {
- isShowCanvas.value = false;
- isSuccess.value = true;
- }, 10);
- }, 1000);
- }
- }, 1100);
- }, 1000);
- });
-
- // 备用方案
- // action.addEventListener("click", function () {
- // context.drawImage(video, -50, -50, 310, 220);
- // const dataURL = canvas.toDataURL("image/png");
- // imgSrc.value = dataURL;
-
- // setTimeout(() => {
- // isShowCanvas.value = false;
- // isSuccess.value = true;
- // }, 10);
- // console.log(dataURL);
- // });
- };
-
- const takePicture = () => {
- console.log("Take Picture !");
- };
-
- // 确认照片
- const confirmPhoto = () => {
- if (UimgSrc.value) {
- uni.navigateTo({
- url: `/pages/createing/index?imageUrl=${UimgSrc.value}`,
- });
- }
- };
-
- // 不满意,重新拍一张
- const reTry = () => {
- isSuccess.value = false;
- isUpload.value = false;
- isShowCanvas.value = true;
- CimgSrc.value = "";
- UimgSrc.value = "";
- setTimeout(() => {
- startCamera();
- }, 10);
- };
-
- // 点击上传照片按钮
- const uploadImg = async () => {
- const UserId = localStorage.getItem("UserId");
- try {
- const res = await getImageQrcode(UserId);
- QRCodeUrl.value = res.data.wxQrcode;
- showQrCode.value = true;
-
- // 成功展示二维码之后,轮询获取上传照片状态
- timer.value = setInterval(() => {
- refreshUploadStatus(res.data.id);
- }, 1000);
- console.log(res, "res");
- } catch (error) {
- console.log(error, "error");
- }
- };
-
- // 刷新状态,直到返回用户上传的图片url
- const refreshUploadStatus = async (id) => {
- try {
- const res = await findImage(id);
- console.log(res, "res");
- if (res.data.image) {
- clearInterval(timer.value);
- uni.showToast({
- title: "上传成功!",
- icon: "success",
- });
- showQrCode.value = false;
- UimgSrc.value = res.data.image;
- CimgSrc.value = "";
- isShowCanvas.value = false;
- isSuccess.value = true;
- isUpload.value = true;
- }
- } catch (error) {
- console.log(error, "error");
- }
- };
-
- // 点击取消,关闭二维码弹窗并取消轮询
- const cancelUplaod = () => {
- showQrCode.value = false;
- clearInterval(timer.value);
- };
-
- onLoad((options) => {
- console.log(options, "options");
- modelUrl.value = options.modelUrl;
- });
-
- onMounted(() => {
- console.log(this);
- clearInterval(timer.value);
- startCamera();
- });
- </script>
-
- <style lang="scss" scoped>
- .page {
- width: 100vw;
- height: 100vh;
- padding: 0;
-
- .top {
- display: flex;
- width: 100%;
- height: 32%;
- .example {
- width: 60%;
- height: 100%;
- color: #000;
- background-color: #fff;
- }
- .model {
- position: relative;
- width: 40%;
- height: 100%;
- background-color: #000000;
- img {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 100%;
- height: 100%;
- }
- }
- }
- .bottom {
- position: relative;
- width: 100%;
- height: 68%;
- video {
- width: 100%;
- height: 100%;
- }
-
- .selectImg {
- position: absolute;
- left: 65rpx;
- bottom: 75rpx;
- width: 68rpx;
- height: 68rpx;
- border: 5rpx solid #ffffff;
- border-radius: 5rpx;
- z-index: 99;
- img {
- position: absolute;
- left: 50%;
- bottom: 50%;
- transform: translate(-50%, 50%);
- width: 70%;
- height: 70%;
- }
- .uploadText {
- position: absolute;
- left: 50%;
- bottom: -40rpx;
- width: 150%;
- font-size: 20rpx;
- transform: translateX(-40%);
- }
- }
-
- #action {
- position: absolute;
- left: 50%;
- bottom: 45rpx;
- width: 120rpx;
- height: 120rpx;
- transform: translateX(-50%);
- background-color: #ffffff;
- border-radius: 60rpx;
- z-index: 99;
- .circleInside {
- position: absolute;
- left: 50%;
- bottom: 50%;
- transform: translate(-50%, 50%);
- width: 100rpx;
- height: 100rpx;
- background-color: #ffffff;
- border-radius: 50%;
- border: 6rpx solid #000;
- }
- }
-
- .confirm {
- position: absolute;
- left: 50%;
- bottom: 75rpx;
- width: 80rpx;
- height: 80rpx;
- // border: 5rpx solid #ffffff;
- transform: translateX(-50%);
- border-radius: 60rpx;
- z-index: 99;
- img {
- position: absolute;
- left: 50%;
- bottom: 50%;
- transform: translate(-50%, 50%);
- width: 100%;
- height: 100%;
- }
- .uploadText {
- position: absolute;
- left: 50%;
- bottom: -40rpx;
- width: 150%;
- font-size: 20rpx;
- transform: translateX(-32%);
- }
- }
-
- .reTry {
- position: absolute;
- right: 65rpx;
- bottom: 75rpx;
- width: 68rpx;
- height: 68rpx;
- border: 5rpx solid #ffffff;
- border-radius: 5rpx;
- z-index: 99;
- img {
- position: absolute;
- left: 50%;
- bottom: 50%;
- transform: translate(-50%, 50%);
- width: 70%;
- height: 70%;
- }
- .uploadText {
- position: absolute;
- left: 50%;
- bottom: -40rpx;
- width: 150%;
- font-size: 20rpx;
- transform: translateX(-40%);
- }
- }
-
- .preview {
- position: relative;
- width: 100%;
- height: 100%;
- z-index: 1;
- .fromCamera {
- position: absolute;
- top: 110rpx;
- width: 120%;
- height: 60%;
- }
- .fromUpload {
- position: absolute;
- top: 110rpx;
- left: 50%;
- transform: translateX(-50%);
- width: 45%;
- }
- }
- }
- .overlay {
- .content {
- width: 100%;
- height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
- .imageBox {
- position: relative;
- margin-top: 200rpx;
- width: 500rpx;
- height: 500rpx;
- border-radius: 30rpx;
- background-color: #fff;
- .mask {
- position: absolute;
- width: 500rpx;
- height: 500rpx;
- border-radius: 30rpx;
- background-color: rgba($color: #000000, $alpha: 0.7);
- z-index: 2;
- }
- image {
- width: 500rpx;
- height: 500rpx;
- border-radius: 30rpx;
- background-color: #fff;
- }
- }
- text {
- margin-top: 20rpx;
- font-weight: 900;
- font-size: 32rpx;
- }
- // .orangeBtn {
- // margin-top: 100rpx;
- // }
- }
- }
- }
- </style>
|