| @@ -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" | ||||