From 5e07c7810b686cce9ac0eff140aaf9ea990e98de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=91=E8=BD=BB=E7=8B=82?= <1677568218@qq.com>
Date: Sun, 18 Dec 2022 23:15:40 +0800
Subject: [PATCH] feat: add personalization img function

---
 .gitignore                          |  3 +-
 app/api/api.py                      | 88 +++++++++++++++++++++++++++--
 src/pages/Personalization/index.vue | 77 +++++++++++++++++++------
 3 files changed, 144 insertions(+), 24 deletions(-)

diff --git a/.gitignore b/.gitignore
index f408895..8ea20f2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,4 +11,5 @@ node_modules
 __pycache__
 .vscode
 *.mjs
-build
\ No newline at end of file
+build
+primary_img
\ No newline at end of file
diff --git a/app/api/api.py b/app/api/api.py
index a202730..e7cd07c 100644
--- a/app/api/api.py
+++ b/app/api/api.py
@@ -99,11 +99,36 @@ class API:
 
     
 
-    def getPrimaryImg(self):
-        self.window.evaluate_js('getPythonData()')
-
-        return get_photo_base64(self.cap)
-
+    def getPrimaryImg(self,type="不裁剪"):
+        # 三种处理图片的方式：不裁剪、居中裁剪成224*224、居中裁剪成320*320。
+        if(type=="不裁剪"):
+            return get_photo_base64(self.cap)
+        elif(type=="居中裁剪成224*224"):
+            img = get_photo(self.cap)
+            height=len(img)
+            width=len(img[0])
+            if(height>224 and width>224):
+                y0 = height//2
+                x0 = width//2
+                x1 = x0-112
+                y1 = y0-112
+                x2 = x0+112
+                y2 = y0+112
+                img = img[y1:y2, x1:x2]
+            return mat2base64(img)
+        elif(type=="居中裁剪成320*320"):
+            img = get_photo(self.cap)
+            height=len(img)
+            width=len(img[0])
+            if(height>320 and width>320):
+                y0 = height//2
+                x0 = width//2
+                x1 = x0-160
+                y1 = y0-160
+                x2 = x0+160
+                y2 = y0+160
+                img = img[y1:y2, x1:x2]
+            return mat2base64(img)
     def getDetectImg(self):
         [time,result,img] = get_photo_detect_img(self.cap,self.net)
         return [time,result,mat2base64(img)]#AttributeError: 'InferenceSession' object has no attribute 'detect'
@@ -118,4 +143,55 @@ class API:
         self.args.update(data)
         with open(getFile("config.json"),'w',encoding='utf8')as fp:
             json.dump(self.args,fp,ensure_ascii=False,indent=4)
-        
+    def getPersonalizationPrimaryImg(self):
+        #判断是否存在"primary_img"文件夹
+        if(os.path.exists(getFile("primary_img"))==False):
+            #不存在则创建
+            os.mkdir(getFile("primary_img"))
+        #返回该文件夹下png文件的数量和列表
+        return [len(os.listdir(getFile("primary_img"))),os.listdir(getFile("primary_img"))]
+    def setPersonalizationPrimaryImg(self,type="不裁剪"):
+        #判断是否存在"primary_img"文件夹
+        if(os.path.exists(getFile("primary_img"))==False):
+            #不存在则创建
+            os.mkdir(getFile("primary_img"))
+        #保存图片
+        # 图片名字是当前时间
+        # 三种处理图片的方式：不裁剪、居中裁剪成224*224、居中裁剪成320*320。
+        if(type=="不裁剪"):
+            cv2.imwrite(getFile("primary_img")+"/"+time.strftime("%Y-%m-%d-%H-%M-%S", time.localtime())+".png",get_photo(self.cap))
+        elif(type=="居中裁剪成224*224"):
+            img = get_photo(self.cap)
+            height=len(img)
+            width=len(img[0])
+            if(height>224 and width>224):
+                y0 = height//2
+                x0 = width//2
+                x1 = x0-112
+                y1 = y0-112
+                x2 = x0+112
+                y2 = y0+112
+                img = img[y1:y2, x1:x2]
+            cv2.imwrite(getFile("primary_img")+"/"+time.strftime("%Y-%m-%d-%H-%M-%S", time.localtime())+".png",img)
+        elif(type=="居中裁剪成320*320"):
+            img = get_photo(self.cap)
+            height=len(img)
+            width=len(img[0])
+            if(height>320 and width>320):
+                y0 = height//2
+                x0 = width//2
+                x1 = x0-160
+                y1 = y0-160
+                x2 = x0+160
+                y2 = y0+160
+                img = img[y1:y2, x1:x2]
+            cv2.imwrite(getFile("primary_img")+"/"+time.strftime("%Y-%m-%d-%H-%M-%S", time.localtime())+".png",img)
+        #返回该文件夹下png文件的数量和列表
+        return [len(os.listdir(getFile("primary_img"))),os.listdir(getFile("primary_img"))]
+    def openPrimaryImgFiles(self):
+        #判断是否存在"primary_img"文件夹
+        if(os.path.exists(getFile("primary_img"))==False):
+            #不存在则创建
+            os.mkdir(getFile("primary_img"))
+        #打开文件夹
+        os.startfile(getFile("primary_img"))
\ No newline at end of file
diff --git a/src/pages/Personalization/index.vue b/src/pages/Personalization/index.vue
index 8c54b23..0fcd0e1 100644
--- a/src/pages/Personalization/index.vue
+++ b/src/pages/Personalization/index.vue
@@ -1,9 +1,60 @@
 <script setup>
 const { t } = useI18n()
+
+const imgType = reactive({
+  name: '图片载入方式',
+  status: [
+    {
+      name: '不裁剪',
+      status: true,
+    },
+    {
+      name: '居中裁剪成224*224',
+      status: false,
+    },
+    {
+      name: '居中裁剪成320*320',
+      status: false,
+    },
+  ],
+})
+// 找到imgType的status为true的name
+const imgTypeStatus = computed(() => {
+  const opt = imgType.status.find(option => option.status === true)
+  return opt ? opt.name : '不裁剪'
+})
+let currentImgUrl = $ref('')
+let ImgLength = $ref(0)
+const timer = setInterval(async () => {
+  const imgBase64 = await window.pywebview.api.getPrimaryImg(imgTypeStatus.value)
+  currentImgUrl = `data:image/jpg;base64,${imgBase64}`
+}, 50)
+const getImgLength = async () => {
+  ImgLength = (await window.pywebview.api.getPersonalizationPrimaryImg())[0]
+}
+const setImg = async () => {
+  ImgLength = (await window.pywebview.api.setPersonalizationPrimaryImg(imgTypeStatus.value))[0]
+}
+const openImgFiles = async () => {
+  await window.pywebview.api.openPrimaryImgFiles()
+}
+onBeforeUnmount(() => {
+  clearInterval(timer)
+})
+onBeforeMount(async () => {
+  await getImgLength()
+})
 </script>
 
 <template>
   <div>
+    <div class="toast toast-top toast-end">
+      <div class="alert alert-success">
+        <div>
+          <span flex items-center><div i-carbon:checkmark-outline />已保存</span>
+        </div>
+      </div>
+    </div>
     <div class="hero justify-start">
       <div class="hero-content flex-col items-end !pb-0">
         <div class=" flex">
@@ -37,39 +88,31 @@ const { t } = useI18n()
         </div>
         <div flex items-center ml-3>
           <div class="badge badge-primary">
-            已采集999张图片
+            已采集<span class="countdown">
+              <span :style="`--value:${ImgLength};`" />
+            </span>张图片
           </div>
           <div>
-            <select class="select select-sm  max-w-xs">
-              <option selected>
-                不裁剪
-              </option>
-              <option>
-                居中裁剪成224*224
-              </option>
-              <option>
-                居中裁剪成320*320
-              </option>
-            </select>
+            <d-select v-model:options="imgType.status" class="select select-sm  max-w-xs" />
           </div>
         </div>
       </div>
       <div class="collect-imgs stack mt-4">
         <div class="collect-img">
-          <img class="max-w-full h-100 rounded-lg bg-contain bg-clip-border" src="/Snipaste_2022-12-01_22-59-42.png" alt="image description">
+          <img class="max-w-full h-100 rounded-lg bg-contain bg-clip-border" :src="currentImgUrl" alt="image description">
         </div>
         <div class="collect-img">
-          <img class="max-w-full h-100 rounded-lg bg-contain bg-clip-border" src="/Snipaste_2022-12-01_22-59-42.png" alt="image description">
+          <img class="max-w-full h-100 rounded-lg bg-contain bg-clip-border" :src="currentImgUrl" alt="image description">
         </div>
         <div class="collect-img">
-          <img class="max-w-full h-100 rounded-lg bg-contain bg-clip-border" src="/Snipaste_2022-12-01_22-59-42.png" alt="image description">
+          <img class="max-w-full h-100 rounded-lg bg-contain bg-clip-border" :src="currentImgUrl" alt="image description">
         </div>
       </div>
       <div flex mt-3>
-        <button class="btn btn-primary">
+        <button class="btn btn-primary" @click="setImg">
           截图
         </button>
-        <button class="btn btn-primary ml-10">
+        <button class="btn btn-primary ml-10" @click="openImgFiles">
           打开文件夹
         </button>
       </div>