| @@ -55,7 +55,8 @@ | |||
| "dayjs": "^1.11.10", | |||
| "uview-plus": "^3.1.37", | |||
| "vue": "^3.2.45", | |||
| "vue-i18n": "^9.1.9" | |||
| "vue-i18n": "^9.1.9", | |||
| "webcamjs": "^1.0.26" | |||
| }, | |||
| "devDependencies": { | |||
| "@dcloudio/types": "^3.3.2", | |||
| @@ -23,6 +23,12 @@ | |||
| "style": { | |||
| "navigationBarTitleText": "智像相册" | |||
| } | |||
| }, | |||
| { | |||
| "path": "pages/camera/index", | |||
| "style": { | |||
| "navigationBarTitleText": "智像相册" | |||
| } | |||
| } | |||
| ], | |||
| "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" | |||
| ></u-tabs> | |||
| <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> | |||
| <!-- 更多tab弹出层 --> | |||
| @@ -53,6 +54,7 @@ | |||
| </u-popup> | |||
| <!-- 模版选择 --> | |||
| <u-list | |||
| v-show="false" | |||
| class="styleListBox" | |||
| @scrolltolower="scrolltolower" | |||
| lowerThreshold="100" | |||
| @@ -81,7 +83,7 @@ | |||
| <script setup> | |||
| //#region 导入 | |||
| import { ref, reactive, watch } from "vue"; | |||
| import { ref, watch } from "vue"; | |||
| import { getListApi } from "../../api/closeStyle"; | |||
| //#endregion ----------------------- | |||
| @@ -109,6 +111,9 @@ function closePopup() { | |||
| showPopup.value = false; | |||
| } | |||
| function openPopup() {} | |||
| function toCreated() { | |||
| uni.navigateTo({ url: "/pages/camera/index" }); | |||
| } | |||
| //#endregion ----------------------- | |||
| //#region 列表加载 | |||
| @@ -118,6 +123,7 @@ const pageSize = ref(20); | |||
| const styleList = ref([]); | |||
| // 得到列表 | |||
| async function getList() { | |||
| return; | |||
| try { | |||
| uni.showLoading({ | |||
| title: "加载中...", | |||
| @@ -1,7 +1,19 @@ | |||
| <template> | |||
| <view> 主页 </view> | |||
| <view>生成完成页</view> | |||
| </template> | |||
| <script setup> | |||
| <script lang="ts" setup> | |||
| //#region 引入 | |||
| import { ref } from "vue"; | |||
| //#endregion ---------------------- | |||
| //#region 引入 | |||
| //#endregion ---------------------- | |||
| //#region 引入 | |||
| //#endregion ---------------------- | |||
| </script> | |||
| <style lang="scss" scoped></style> | |||
| @@ -4040,6 +4040,11 @@ vue@^3.2.45: | |||
| "@vue/server-renderer" "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: | |||
| version "2.0.2" | |||
| resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1" | |||