congzc il y a 1 an
Parent
révision
2663d88497
9 fichiers modifiés avec 1449 ajouts et 5 suppressions
  1. +2
    -1
      package.json
  2. +6
    -0
      src/pages.json
  3. +143
    -0
      src/pages/camera/index copy 3.vue
  4. +67
    -0
      src/pages/camera/index copy.vue
  5. +154
    -0
      src/pages/camera/index.vue
  6. +8
    -2
      src/pages/chooseStyle/index.vue
  7. +14
    -2
      src/pages/created/index.vue
  8. +1050
    -0
      src/utils/webcam.js
  9. +5
    -0
      yarn.lock

+ 2
- 1
package.json Voir le fichier

@@ -55,7 +55,8 @@
"dayjs": "^1.11.10", "dayjs": "^1.11.10",
"uview-plus": "^3.1.37", "uview-plus": "^3.1.37",
"vue": "^3.2.45", "vue": "^3.2.45",
"vue-i18n": "^9.1.9"
"vue-i18n": "^9.1.9",
"webcamjs": "^1.0.26"
}, },
"devDependencies": { "devDependencies": {
"@dcloudio/types": "^3.3.2", "@dcloudio/types": "^3.3.2",


+ 6
- 0
src/pages.json Voir le fichier

@@ -23,6 +23,12 @@
"style": { "style": {
"navigationBarTitleText": "智像相册" "navigationBarTitleText": "智像相册"
} }
},
{
"path": "pages/camera/index",
"style": {
"navigationBarTitleText": "智像相册"
}
} }
], ],
"easycom": { "easycom": {


+ 143
- 0
src/pages/camera/index copy 3.vue Voir le fichier

@@ -0,0 +1,143 @@
<template>
<view class="page">
<!-- 顶部 -->
<view class="top">
<view class="tips">提示区</view>
<view class="showModel">展示模版</view>
</view>
<!-- 底部 -->
<view class="bottom">
<view class="camera">
<view v-show="!photoUrl" id="my_camera"></view>
<view v-show="photoUrl" id="results"></view>
</view>
<view class="btnBox">
<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>

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

//#region 相机
// 拍照
const photoUrl = ref(null);
function takePhoto() {
// console.log(Webcam.snap);
Webcam.snap((res) => {
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>

+ 67
- 0
src/pages/camera/index copy.vue Voir le fichier

@@ -0,0 +1,67 @@
<template>
<div>
<div id="results"></div>
<div id="my_camera"></div>
<form>
<input type="button" value="拍照" @click="take_snapshot" />
<input type="button" value="关闭" @click="close_snapshot" />
</form>
</div>
</template>

// js部分
<script lang="ts" setup>
import { ref, watch, onMounted } from "vue";
//引入
import Webcam from "webcamjs";
//
const take_snapshot = () => {
// 要抓拍照片,只需调用Webcam.snap()函数,传入一个回调函数。图像数据将作为data URI传递给函数,然后您可以在您的web页面中显示它,或提交给服务器
Webcam.snap(function (data_uri) {
// display results in pages
console.log(data_uri);
document.getElementById("results").innerHTML =
"<h2>Here is your image:</h2>" + '<img src="' + data_uri + '"/>';
});
};
const close_snapshot = () => {
//关闭摄像头
Webcam.reset();
};
//以下为配置项可自取
onMounted(() => {
Webcam.set({
width: 1080, //实时摄像机查看器的宽度
height: 1920, //实时摄像机查看器的高度
dest_width: 400, //捕获相机图像的宽
dest_height: 400, //捕获相机图像的高
crop_width: 300, //最终裁剪图像的宽度(以像素为单位),默认为dest_width。
crop_height: 300, //最终裁剪图像的高度(以像素为单位),默认为dest_height。
image_format: "jpeg", //捕获图像的期望图像格式,可以是“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参数名
});
// DOM元素必须已经创建并且为空。将ID或CSS选择器传递给Webcam.attach()函数(挂载dom)
Webcam.attach("#my_camera");
});
</script>

<style lang="scss" scoped>
video {
// width: 100vw;
// height: 100vh;
// object-fit: cover;
// background-color: aquamarine;
}
#results {
width: 120rpx;
height: 120rpx;
}
</style>

+ 154
- 0
src/pages/camera/index.vue Voir le fichier

@@ -0,0 +1,154 @@
<template>
<view class="page">
<!-- 顶部 -->
<view class="top">
<view class="tips">提示区</view>
<view class="showModel">展示模版</view>
</view>
<!-- 底部 -->
<view class="bottom">
<view class="camera">
<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 相机
// 拍照
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>

+ 8
- 2
src/pages/chooseStyle/index.vue Voir le fichier

@@ -12,7 +12,8 @@
@click="chooseTab" @click="chooseTab"
></u-tabs> ></u-tabs>
<view class="moreTabs"> <view class="moreTabs">
<view class="moreIcon" @click="showPopup = true"> 更多 </view>
<!-- <view class="moreIcon" @click="showPopup = true"> 更多 </view> -->
<view class="moreIcon" @click="toCreated"> 更多 </view>
</view> </view>
</view> </view>
<!-- 更多tab弹出层 --> <!-- 更多tab弹出层 -->
@@ -53,6 +54,7 @@
</u-popup> </u-popup>
<!-- 模版选择 --> <!-- 模版选择 -->
<u-list <u-list
v-show="false"
class="styleListBox" class="styleListBox"
@scrolltolower="scrolltolower" @scrolltolower="scrolltolower"
lowerThreshold="100" lowerThreshold="100"
@@ -81,7 +83,7 @@


<script setup> <script setup>
//#region 导入 //#region 导入
import { ref, reactive, watch } from "vue";
import { ref, watch } from "vue";
import { getListApi } from "../../api/closeStyle"; import { getListApi } from "../../api/closeStyle";
//#endregion ----------------------- //#endregion -----------------------


@@ -109,6 +111,9 @@ function closePopup() {
showPopup.value = false; showPopup.value = false;
} }
function openPopup() {} function openPopup() {}
function toCreated() {
uni.navigateTo({ url: "/pages/camera/index" });
}
//#endregion ----------------------- //#endregion -----------------------


//#region 列表加载 //#region 列表加载
@@ -118,6 +123,7 @@ const pageSize = ref(20);
const styleList = ref([]); const styleList = ref([]);
// 得到列表 // 得到列表
async function getList() { async function getList() {
return;
try { try {
uni.showLoading({ uni.showLoading({
title: "加载中...", title: "加载中...",


+ 14
- 2
src/pages/created/index.vue Voir le fichier

@@ -1,7 +1,19 @@
<template> <template>
<view> 主页 </view>
<view>生成完成页</view>
</template> </template>
<script setup>

<script lang="ts" setup>
//#region 引入
import { ref } from "vue"; import { ref } from "vue";
//#endregion ----------------------

//#region 引入

//#endregion ----------------------

//#region 引入

//#endregion ----------------------
</script> </script>

<style lang="scss" scoped></style> <style lang="scss" scoped></style>

+ 1050
- 0
src/utils/webcam.js
Fichier diff supprimé car celui-ci est trop grand
Voir le fichier


+ 5
- 0
yarn.lock Voir le fichier

@@ -4040,6 +4040,11 @@ vue@^3.2.45:
"@vue/server-renderer" "3.3.4" "@vue/server-renderer" "3.3.4"
"@vue/shared" "3.3.4" "@vue/shared" "3.3.4"


webcamjs@^1.0.26:
version "1.0.26"
resolved "https://registry.yarnpkg.com/webcamjs/-/webcamjs-1.0.26.tgz#74b81cda13da61fcbb07f6e8658b403a3056821b"
integrity sha512-ruUdzb7MV4QUxO1TfIdAjzeEhB8+Y1GY6HhQTytij+rB98972XZ+mbMUGrjBvWRb975loKjqgELdYjVNMNRfFQ==

which@^2.0.1: which@^2.0.1:
version "2.0.2" version "2.0.2"
resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1" resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"


Chargement…
Annuler
Enregistrer