Bläddra i källkod

upload

dev_YWQ
HolyKnightIX 1 år sedan
förälder
incheckning
1739fbc734
1 ändrade filer med 79 tillägg och 22 borttagningar
  1. +79
    -22
      src/pages/camera/index.vue

+ 79
- 22
src/pages/camera/index.vue Visa fil

@@ -30,7 +30,7 @@
</div>

<div v-if="isSuccess">
<div class="selectImg">
<div class="selectImg" @click="uploadImg">
<img src="../../assets/img/selectImg.png" />
<div class="uploadText">上传照片</div>
</div>
@@ -53,22 +53,20 @@
></canvas>

<div v-if="isSuccess" class="preview">
<img :src="imgSrc" />
<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"
@click="showQrCode = false"
opacity="0.9"
>
<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">取&nbsp;消</view>
<view class="orangeBtn" style="margin-top: 100rpx" @click="cancelUplaod"
>取&nbsp;消</view
>
</view>
</u-overlay>
</div>
@@ -80,9 +78,12 @@ import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";

import { getImageQrcode, findImage } from "../../api/camera.js";

let imgSrc = ref("");
let CimgSrc = ref(""); // 相机拍照的图片路径,上传前需校验
let UimgSrc = ref(""); // 用户上传的图片路径,上传无需校验
let isSuccess = ref(false);
let isShowCanvas = ref(true);
let isUpload = ref(false);

let modelUrl = ref("");

let QRCodeUrl = ref("");
@@ -157,15 +158,37 @@ const startCamera = () => {
}

action.addEventListener("click", function () {
canvas.width = 1530;
canvas.height = 950;
context.drawImage(video, 0, 0);
const dataURL = canvas.toDataURL("image/png");
imgSrc.value = dataURL;
uni.showToast({
title: "准备好了吗?",
icon: "success",
});
setTimeout(() => {
isShowCanvas.value = false;
isSuccess.value = true;
}, 10);
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);
});

// 备用方案
@@ -187,13 +210,21 @@ const takePicture = () => {
};

// 确认照片
const confirmPhoto = () => {};
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;
imgSrc.value = "";
CimgSrc.value = "";
UimgSrc.value = "";
setTimeout(() => {
startCamera();
}, 10);
@@ -209,7 +240,7 @@ const uploadImg = async () => {

// 成功展示二维码之后,轮询获取上传照片状态
timer.value = setInterval(() => {
refreshUploadStatus(UserId);
refreshUploadStatus(res.data.id);
}, 1000);
console.log(res, "res");
} catch (error) {
@@ -222,11 +253,30 @@ 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;
@@ -389,12 +439,19 @@ onMounted(() => {
width: 100%;
height: 100%;
z-index: 1;
img {
.fromCamera {
position: absolute;
top: 110rpx;
width: 120%;
height: 60%;
}
.fromUpload {
position: absolute;
top: 110rpx;
left: 50%;
transform: translateX(-50%);
width: 45%;
}
}
}
.overlay {


Laddar…
Avbryt
Spara