Преглед на файлове

hotfix: heic格式图片展示错误问题修复

ymz преди 4 месеца
родител
ревизия
9cbdf3f079
променени са 5 файла, в които са добавени 78 реда и са изтрити 3 реда
  1. 2 2
      env/.env.development
  2. 11 0
      package-lock.json
  3. 1 0
      package.json
  4. 13 0
      src/manifest.json
  5. 51 1
      src/pages/task/task-detail/components/imgCom.vue

+ 2 - 2
env/.env.development

@@ -2,10 +2,10 @@ NODE_ENV=development
 
 # pre环境
 # VITE_APP_URL=https://mic.freerr.cn
-VITE_APP_URL=http://10.144.62.235:9999
+# VITE_APP_URL=http://10.144.62.235:9999
 # 生产
 # VITE_APP_URL=https://cnbg.yaoyi.net
-# VITE_APP_URL=https://mic.cnbg.com.cn
+VITE_APP_URL=https://mic.cnbg.com.cn
 # 中生测试
 # VITE_APP_URL=https://mic-t.cnbg.com.cn
 

+ 11 - 0
package-lock.json

@@ -26,6 +26,7 @@
         "dayjs": "^1.11.10",
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-prettier": "^5.0.1",
+        "heic2any": "^0.0.4",
         "pinia-plugin-persistedstate": "^3.2.0",
         "prettier": "^3.0.3",
         "qs": "^6.11.2",
@@ -8016,6 +8017,11 @@
         "he": "bin/he"
       }
     },
+    "node_modules/heic2any": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmmirror.com/heic2any/-/heic2any-0.0.4.tgz",
+      "integrity": "sha512-3lLnZiDELfabVH87htnRolZ2iehX9zwpRyGNz22GKXIu0fznlblf0/ftppXKNqS26dqFSeqfIBhAmAj/uSp0cA=="
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
@@ -20224,6 +20230,11 @@
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
       "dev": true
     },
+    "heic2any": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmmirror.com/heic2any/-/heic2any-0.0.4.tgz",
+      "integrity": "sha512-3lLnZiDELfabVH87htnRolZ2iehX9zwpRyGNz22GKXIu0fznlblf0/ftppXKNqS26dqFSeqfIBhAmAj/uSp0cA=="
+    },
     "html-encoding-sniffer": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",

+ 1 - 0
package.json

@@ -58,6 +58,7 @@
     "dayjs": "^1.11.10",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
+    "heic2any": "^0.0.4",
     "pinia-plugin-persistedstate": "^3.2.0",
     "prettier": "^3.0.3",
     "qs": "^6.11.2",

+ 13 - 0
src/manifest.json

@@ -71,6 +71,19 @@
     ]
   },
   "h5": {
+    "devServer": {
+      "disableHostCheck": true,
+      "proxy": {
+        "/admin": {
+          "target": "https://mic.cnbg.com.cn", //目标接口域名
+          "changeOrigin": true, // 是否跨域
+          "secure": false,
+          "pathRewrite": {
+            "^/admin": ""
+          }
+        }
+      }
+    },
     "router": {
       "base": "./"
     }

+ 51 - 1
src/pages/task/task-detail/components/imgCom.vue

@@ -15,6 +15,7 @@
             mode="aspectFill"
             class="img-item"
             @click="preImg(imgList, index)"
+            @error="errorImage(item, index)"
           />
         </view>
       </div>
@@ -23,7 +24,8 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, getCurrentInstance } from 'vue'
+import heic2any from 'heic2any'
 
 const props = defineProps({
   item: Object,
@@ -64,6 +66,54 @@ const preImg = (imgList: any[], index: number) => {
     urls: arr
   })
 }
+const errorImage = async (item: any, index: number) => {
+  // #ifdef H5
+  await handleImage(item, index)
+
+  // #endif
+}
+const instance = getCurrentInstance()
+
+const imgValue = ref('')
+const handleImage = async (item: any, index: number) => {
+  let url = item.path
+  const response = await fetch(url)
+  const blob = await response.blob()
+
+  if (await isHeicFile(blob)) {
+    const heicImageBlob = await fetch(url).then((res) => res.blob())
+
+    // 使用 heic2any 库将 HEIC 转换为 JPG
+    heic2any({ blob: heicImageBlob, toType: 'image/jpeg' })
+      .then((convertedBlob) => {
+        // @ts-ignore
+        const imgURL = URL.createObjectURL(convertedBlob)
+        imgList.value[index].path = imgURL
+        imgValue.value = imgURL
+        instance?.proxy?.$forceUpdate()
+      })
+      .catch((err) => {
+        console.log('err', err)
+      })
+  }
+}
+
+const isHeicFile = (file: any) => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onloadend = () => {
+      const buffer: string | ArrayBuffer | null = reader.result
+      // HEIC 文件的前几个字节为 "00 00 00 18 66 74 79 70 68 65 69 63" 或 "00 00 00 20 66 74 79 70 68 65 69 63" (小端字节序)
+      const signature = new Uint8Array(buffer as ArrayBuffer).subarray(0, 12)
+      const heicSignature = [0x00, 0x00, 0x00, 0x18, 0x66, 0x74, 0x79, 0x70, 0x68, 0x65, 0x69, 0x63]
+
+      const isHeic = signature.every((byte, index) => byte === heicSignature[index])
+      resolve(isHeic)
+    }
+    reader.onerror = reject
+    reader.readAsArrayBuffer(file)
+  })
+}
 </script>
 
 <style lang="scss" scoped>