@@ -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", | ||||
@@ -23,6 +23,12 @@ | |||||
"style": { | "style": { | ||||
"navigationBarTitleText": "智像相册" | "navigationBarTitleText": "智像相册" | ||||
} | } | ||||
}, | |||||
{ | |||||
"path": "pages/camera/index", | |||||
"style": { | |||||
"navigationBarTitleText": "智像相册" | |||||
} | |||||
} | } | ||||
], | ], | ||||
"easycom": { | "easycom": { | ||||
@@ -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> |
@@ -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> |
@@ -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> |
@@ -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: "加载中...", | ||||
@@ -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> |
@@ -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" | ||||