congzc 1 ano atrás
pai
commit
d2c8a6f163
4 arquivos alterados com 190 adições e 19 exclusões
  1. +5
    -0
      src/pages.json
  2. +177
    -0
      src/pages/camera/index copy 2.vue
  3. +7
    -18
      src/pages/camera/index.vue
  4. +1
    -1
      src/pages/chooseStyle/index.vue

+ 5
- 0
src/pages.json Ver arquivo

@@ -48,5 +48,10 @@
"rpxCalcMaxDeviceWidth": 1080,
"rpxCalcBaseDeviceWidth": 1080,
"rpxCalcIncludeWidth": 1080
},
"app": {
"requiredBackgroundModes": [
"camera"
]
}
}

+ 177
- 0
src/pages/camera/index copy 2.vue Ver arquivo

@@ -0,0 +1,177 @@
<template>
<view class="page">
<!-- 顶部 -->
<view class="top">
<view class="tips">提示区</view>
<view class="showModel">展示模版</view>
</view>
<!-- 底部 -->
<view class="bottom">
<view class="camera">
<video
src=""
muted="muted"
id="videoElement"
autoplay="autoplay"
playsinline="playsinline"
></video>
<!-- <view v-show="!photoUrl" id="my_camera"></view>
<view v-show="photoUrl" id="results"></view> -->
</view>
<view class="btnBox">
<view v-show="!photoUrl" class="takeBtn" @click="takePhoto">拍照</view>
<view v-show="photoUrl" class="takeBtn" @click="photoUrl = null"
>重拍</view
>
</view>
</view>
</view>
</template>

// js部分
<script setup>
//#region 引入
import { ref, watch, onMounted } from "vue";
// import Webcam from "webcamjs";
import Webcam from "../../utils/webcam";
//#endregion ----------------------------

//#region 摄像头
setTimeout(() => {
navigator.mediaDevices
.getUserMedia({ video: true })
.then(function (stream) {
console.log(stream);
// 获取到摄像头的视频流
const video = document.getElementById("videoElement");
video.srcObject = stream;
})
.catch((error) => {
console.error("调用摄像头失败", error);
});
}, 1000);
//#endregion ---------------------------------

//#region 相机
// 拍照
const photoUrl = ref(null);
function takePhoto() {
// console.log(Webcam.snap);
uni.chooseImage({
sourceType: ["camera"],
success: function (res) {
console.log(JSON.stringify(res.tempFilePaths));
},
fail: (err) => {
console.error("选择图片失败", err);
uni.showToast({
title: "选择图片失败, 请稍后重试",
icon: "none",
});
},
});
return;
Webcam.snap((res) => {
// Webcam.freeze();
photoUrl.value = res;
document.getElementById("results").innerHTML =
'<img style="width: 100%;height: 100%;" src="' + res + '"/>';
});
}
// 关闭
function closeCamera() {
Webcam.reset();
}
//#endregion ----------------------------

//#region 初始化配置相机
onMounted(() => {
Webcam.set({
// width: 864, //实时摄像机查看器的宽度
// height: 1536, //实时摄像机查看器的高度
width: 864, //实时摄像机查看器的宽度
height: 1536, //实时摄像机查看器的高度
dest_width: 392, //捕获相机图像的宽
dest_height: 698, //捕获相机图像的高
dest_width: 720, //捕获相机图像的宽
dest_height: 720, //捕获相机图像的高
// crop_width: 700, //最终裁剪图像的宽度(以像素为单位),默认为dest_width。
// crop_height: 700, //最终裁剪图像的高度(以像素为单位),默认为dest_height。
image_format: "png", //捕获图像的期望图像格式,可以是“jpeg”或“png”。
jpeg_quality: 90, //对于JPEG图像,这是理想的质量,从0(最差)到100(最好)。
enable_flash: true, //启用或禁用Flash回退,如果没有本机网络摄像头访问。
force_flash: false, //将此设置为true将始终在adobeflash回退模式下运行。
flip_horiz: false, //将此设置为true将水平翻转图像(镜像模式)。
fps: 30, //设置所需的fps(帧/秒)捕获速率。
swfURL: "./webcam.swf", //为adobeflash回退SWF文件设置一个备用位置
flashNotDetectedText: "未检测到flash播放器的文本/html。", //未检测到flash播放器的文本/html。
unfreeze_snap: true, //是否在拍照后解冻相机
upload_name: "webcam", //在上传摄像头图像文件时使用哪个HTTP POST参数名
flip_horiz: true, //是否镜像
});
// DOM元素必须已经创建并且为空。将ID或CSS选择器传递给Webcam.attach()函数(挂载dom)
// Webcam.attach("#my_camera");
});
//#endregion -----------------------------
</script>

<style lang="scss" scoped>
.page {
padding: 0;
width: 100vw;
height: 100vh;
// overflow: hidden;
}
.top {
display: flex;
width: 100vw;
height: 30vh;
.tips {
width: 60%;
height: 30vh;
background-color: #000;
text-align: center;
}
.showModel {
width: 40%;
height: 30vh;
background-color: red;
text-align: center;
}
}
.bottom {
video {
width: 100% !important;
height: 100% !important;
}
display: flex;
width: 100vw;
height: 70vh;
.camera {
width: 80vw;
height: 70vh;
background-color: green;
// #my_camera {
// width: 100% !important;
// height: 100% !important;
// }
// #results {
// width: 100% !important;
// height: 100% !important;
// }
}
.btnBox {
width: 20vw;
height: 70vh;
background-color: skyblue;
.takeBtn {
width: 15vw;
height: 15vw;
border-radius: 50%;
background-color: #444;
line-height: 15vw;
text-align: center;
}
}
}
</style>

+ 7
- 18
src/pages/camera/index.vue Ver arquivo

@@ -12,12 +12,16 @@
<view v-show="photoUrl" id="results"></view>
</view>
<view class="btnBox">
<view v-show="!photoUrl" class="takeBtn" @click="takePhoto">拍照</view>
<view class="takeBtn" @click="takePhoto">拍照</view>
<view v-show="photoUrl" class="takeBtn" @click="photoUrl = null"
>重拍</view
>
</view>
</view>
<!-- <view id="results"></view>
<view id="my_camera"></view>
<view @click="takePhoto">拍照</view>
<view @click="closeCamera">关闭</view> -->
</view>
</template>

@@ -34,22 +38,7 @@ import Webcam from "../../utils/webcam";
const photoUrl = ref(null);
function takePhoto() {
// console.log(Webcam.snap);
uni.chooseImage({
sourceType: ["camera"],
success: function (res) {
console.log(JSON.stringify(res.tempFilePaths));
},
fail: (err) => {
console.error("选择图片失败", err);
uni.showToast({
title: "选择图片失败, 请稍后重试",
icon: "none",
});
},
});
return;
Webcam.snap((res) => {
// Webcam.freeze();
photoUrl.value = res;
document.getElementById("results").innerHTML =
'<img style="width: 100%;height: 100%;" src="' + res + '"/>';
@@ -87,7 +76,7 @@ onMounted(() => {
flip_horiz: true, //是否镜像
});
// DOM元素必须已经创建并且为空。将ID或CSS选择器传递给Webcam.attach()函数(挂载dom)
// Webcam.attach("#my_camera");
Webcam.attach("#my_camera");
});
//#endregion -----------------------------
</script>
@@ -97,7 +86,7 @@ onMounted(() => {
padding: 0;
width: 100vw;
height: 100vh;
// overflow: hidden;
overflow: hidden;
}
.top {
display: flex;


+ 1
- 1
src/pages/chooseStyle/index.vue Ver arquivo

@@ -242,7 +242,7 @@ function createPhoto(item) {
// background-color: red;
.moreIcon {
margin-left: 50rpx;
margin-top: 20rpx;
margin-top: 15rpx;
width: 130rpx;
height: 60rpx;
border-radius: 40rpx;


Carregando…
Cancelar
Salvar