人脸识别优化

src/api/badge.ts

@@ -111,3 +111,19 @@ export const trialPhone = (data: any) => {
     data,
   })
 }
+
+// 获取上传人脸检测url
+export const getUploadUrl = (params: any) => {
+  return request('images/uploadCheckUrl', {
+    method: 'GET',
+    params,
+  })
+}
+
+// 人脸检测接口
+export const faceCheck = (params: any) => {
+  return request('images/faceCheck', {
+    method: 'GET',
+    params,
+  })
+}

src/views/badge/index.vue

@@ -4,7 +4,7 @@ import H5Cropper  from 'vue-cropper-h5'
 import "vue-cropper-h5/dist/style.css"
 import { showLoadingToast, showToast, closeToast, showFailToast, showSuccessToast } from 'vant';
 import * as badgeApi from '@/api/badge'
-import { onMounted, ref } from 'vue';
+
 import { localStorage } from '@/utils/local-storage'
 import CryptoJS from 'crypto-js'
 
@@ -12,14 +12,17 @@ const show = ref(false)
 const imgShow = ref(false)
 const router = useRouter()
 const option = ref({
-  autoCropWidth: 1000,
+  autoCropWidth: 1024,
-  autoCropHeight: 1000,
+  autoCropHeight: 1024,
-  ceilbutton: false
+  ceilbutton: false,
+  infoTrue: true,
+  enlarge: 6
 })
 const options = ref({
   autoCropWidth: 1000,
   autoCropHeight: 1000,
-  ceilbutton: false
+  ceilbutton: false,
+  info: true
 })
 
 const openApp = () => {
@@ -38,7 +41,6 @@ const openApp = () => {
     options.value.ceilbutton = false
   }
 }
-
 const imgurl = ref('')
 const imgBgUrl = ref('')
 const remaining = ref(0)
@@ -58,10 +60,12 @@ const getSizeList = () => {
 
 const orderStat = ref({})
 const prodId = ref(7)
+const prop = ref('')
 const getOrderStat = () => {
   badgeApi.getOrderStat({}).then((res: any) => {
     orderStat.value = res
     prodId.value = res.prod_id
+    prop.value = res.prop
     getSundryList()
   })
 }
@@ -117,36 +121,132 @@ const trialPhone = async () => {
   }) 
 }
 const picture = ref(null)
+
+let imgPromise = null;
+
+const imageWidth = ref(0);
+const imageHeight = ref(0);
 function getbase64Data(data) {
+  console.log('getbase64Data', data)
   picture.value = data;
-}
+
-function getBlob(data) {
+  const img = new Image();
-  console.log('getBlob', data)
+  img.src = data;
-  if (data.size > 1024 * 1024 * 10) {
+  img.onload = () => {
+    imageWidth.value = img.naturalWidth;
+    imageHeight.value = img.naturalHeight;
+    if (imageWidth.value < 800 || imageHeight.value < 800) {
+      showToast('请上传尺寸大于800*800像素的照片')
+      return
+    }
+  }
+  const blob = base64ToBlob(data);
+  if (blob.size > 1024 * 1024 * 10) {
     showToast('照片大小不能超过10M')
     return
   }
-  imgurl.value = data;
+  imgurl.value = blob;
-}
+  if (prodId.value == 7) {
-function getFile(data) {
+    getUploadUrl()
-  console.log('getFile', data)
-}
-const pictureBg = ref(null)
-function getBgbase64Data(data) {
-  pictureBg.value = data;
-}
-function getBlobBg(data) {
-  console.log('getBlobBg', data)
-  if (data.size > 1024 * 1024 * 10) {
-    showToast('照片大小不能超过10M')
-    return
   }
-  imgBgUrl.value = data;
 }
-const getRandomNumber = () => {
+
-  return kindList.value.map(obj => obj.id)[Math.floor(Math.random() * kindList.value.length)];
+function base64ToBlob(base64) {
+    var arr = base64.split(','),
+        mime = arr[0].match(/:(.*?);/)[1],
+        bstr = atob(arr[1]),
+        n = bstr.length,
+        u8arr = new Uint8Array(n);
+    while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+    }
+    return new Blob([u8arr], {
+        type: mime
+    });
 }
 
+function imgorigoinf(data) {
+  const img = new Image();
+  const objectUrl = URL.createObjectURL(data); // 创建文件对象的URL
+  img.src = objectUrl;
+  img.onload = () => {
+    imageWidth.value = img.naturalWidth;
+    imageHeight.value = img.naturalHeight;
+    if (imageWidth.value < 800 || imageHeight.value < 800) {
+      showToast('请上传尺寸大于800*800像素的照片')
+      setTimeout(() => {
+        const btn = document.querySelector('.btn')
+        if (btn) {
+          btn.click()
+        }
+      }, 1500);
+      imgurl.value = null
+      picture.value = null
+      return
+    }
+    console.log('imageWidth', imageWidth.value, 'imageHeight', imageHeight.value)
+  }
+}
+
+const getUploadUrl = () => {
+  badgeApi.getUploadUrl({}).then((res: any) => {
+    if (res) {
+      sendFaceToOss(imgurl.value, res.upload_url, res.path)
+    }
+  })
+}
+
+const sendFaceToOss = async (src: string, url: string, path: string) => {
+  try {
+    const response = await fetch(url, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'image/jpeg'
+      },
+      body: src
+    })
+    if (!response.ok) {
+      throw new Error('Upload failed')
+    }
+    console.log('图片上传成功--------', response)
+    if (response.status == 200) {
+      badgeApi.faceCheck({
+        path: path,
+        prop: prop.value,
+        prod_id: 7
+      }).then((res: any) => {
+        console.log('faceCheck', res)
+        showSuccessToast({
+          message: '人脸检测成功',
+          duration: 2000,
+        })
+      }).catch((err) => {
+        console.log('faceCheck', err)
+        showFailToast({
+          message: err.message || '人脸检测失败',
+          icon: 'none',
+          duration: 2000,
+        })
+        imgurl.value = null
+        picture.value = null
+      }).finally(() => {
+        setTimeout(() => {
+          closeToast()
+        }, 2000);
+      })
+    }
+  } catch (err) {
+    closeToast()
+    showFailToast({
+      message: err.message || '上传失败',
+      icon: 'none',
+      duration: 2000,
+    })
+  }
+}
+
+
+
 // 获取Pid
 const pid = ref('')
 const getPid = async () => {
@@ -157,10 +257,11 @@ const getPid = async () => {
     duration: 0,
   })
   const params = {
-    prod_id: prodId.value
+    prod_id: prodId.value,
+    extend_value: -1,
   }
   try {
-    const res = await badgeApi.getPid(params)
+    const res = await badgeApi.getPid(params) as any
     console.log('getPid', res)
     isLoading.value = false
     pid.value = res.pid
@@ -217,7 +318,8 @@ const sendToOss = async (src: string, url: string) => {
       const params = {
         pid: pid.value,
         group: 1,
-        prod_id: prodId.value
+        prod_id: prodId.value,
+        extend_value: -1
       }
       badgeApi.putModeling(params).then((res: any) => {
         console.log('putModeling', res)
@@ -412,7 +514,7 @@ onMounted(() => {
       <div class="style-box">
         <div class="style-box-item">
           <div class="style-item-title" :class="{ styleActive: prodId == 7 }" @click="styleChange(7)">
-            人物立体徽章
+            {{ prop == '3D真人肖像' ? '3D真人肖像' : '人物立体徽章' }} 
           </div>
           <div class="style-item-title" :class="{ styleActive: prodId == 8 }" @click="styleChange(8)">
             宠物立体徽章
@@ -449,6 +551,31 @@ onMounted(() => {
         </div>
       </div>
     </div>
+    <div class="step-line" v-if="prop == '3D真人肖像'">
+      <div class="step-line-item">
+        <div class="step-line-item-title">
+          <span style="display: flex; align-items: center;justify-content: center;">
+            <span style="height: 1px; background: #ccc;width: 50px;"></span>
+            <span style="margin: 0 8px; color: #888;">照片示例</span>
+            <span style="height: 1px; background: #ccc;width: 50px;"></span>
+          </span>
+        </div>
+        <div class="step-line-item-desc" style="display: flex; align-items: center;justify-content: space-around;padding: 16px 16px 0 16px;">
+          <div class="step-line-item-desc-item">
+            <img src="@/assets/badge/1.png" style="width: 20vw;height: 20vw;border-radius: 8px;" alt="">
+          </div>
+          <div class="step-line-item-desc-item">
+            <img src="@/assets/badge/2.png" style="width: 20vw;height: 20vw;border-radius: 8px;" alt="">
+          </div>
+          <div class="step-line-item-desc-item">
+            <img src="@/assets/badge/3.png" style="width: 20vw;height: 20vw;border-radius: 8px;" alt="">
+          </div>  
+          <div class="step-line-item-desc-item">
+            <img src="@/assets/badge/4.png" style="width: 20vw;height: 20vw;border-radius: 8px;" alt="">
+          </div> 
+        </div>
+      </div>
+    </div>
     <div class="photo-upload-body">
       <div v-if="!picture" class="photo-upload-box">
         <div class="photo-upload-header" @click="imgShow = true">
@@ -472,10 +599,10 @@ onMounted(() => {
       </div>
       <img class="photo-upload-img" v-if="picture" :src="picture" alt="" srcset="">
       <div class="photo-upload-box-1">
-        <h5-cropper :option="option" @getbase64Data="getbase64Data" @getFile="getFile" @getblob='getBlob' ></h5-cropper>
+        <h5-cropper :option="option" @getbase64Data="getbase64Data" @imgorigoinf="imgorigoinf" ></h5-cropper>
       </div>
     </div>
-    <div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 7">温馨提示：请上传只有1-2人的照片</div>
+    <div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 7">温馨提示：请上传只有{{ prop == '3D真人肖像' ? '1' : '1-3' }}人的照片</div>
     <div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 8">温馨提示：请上传只有1-3只宠物的照片</div>
     <div style="height: 90px;"></div>
     <div class="design-action-bar">

src/views/badge/record.vue

@@ -18,11 +18,11 @@
                 <img :src="item.path" :alt="item.name" class="record-image">
                 <div class="record-image-item-shadow"></div>
               </block>
-              <div v-else-if="item.status == 0" class="record-image-item-loading">
+              <div v-else-if="item.status == 0 || item.reason" class="record-image-item-loading">
-                设计中
+                <div style="width: 70%;font-size: 12px;">{{ item.reason || '设计中' }}</div>
               </div>
-              <div v-else-if="item.status == 2" class="record-image-item-loading">
+              <div v-else-if="item.status == 2 || item.reason" class="record-image-item-loading">
-                设计失败
+                <div style="width: 70%;font-size: 12px;">{{ item.reason || '设计失败' }}</div>
               </div>
             </div>
           </div>
@@ -208,6 +208,7 @@ onUnmounted(() => {
   border-radius: 50%;
   font-size: 16px;
   color: #999;
+  text-align: center;
 }
 
 .record-image-item-null {