图片遇错循环加载4次机会

src/hooks/useSetImgBg.ts

@@ -77,6 +77,28 @@ interface MessageData {
   blob?: Blob
 }
 
+const autoLoadImage = (url: any, errorNum: number, rs?: any, rj?: any) => {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.src = url as string
+    img.onload = () => {
+      rs ? rs(img) : resolve(img)
+    }
+    img.onerror = () => {
+      console.log('img error')
+      if (errorNum == 3) {
+        ElMessage.error('图片渲染失败：' + url)
+        rj ? rj() : reject()
+      } else {
+        if (errorNum == 0) {
+          ElMessage.warning('正在加载图片...')
+        }
+        autoLoadImage(url, ++errorNum, resolve, reject)
+      }
+    }
+  })
+}
+
 export const useSetImgBg = (option: Ref<SetImgBgOption>, frontColor?: Ref<string>, setFrontColor?: any) => {
   const { fullPath } = useRoute()
   const mainStore = useMainStore()
@@ -89,51 +111,71 @@ export const useSetImgBg = (option: Ref<SetImgBgOption>, frontColor?: Ref<string
     }
   })
   const initImage = async ({ image, frontColor, setFrontColor }: InitOption) => {
-    const filePath = image as string
+    // const filePath = image as string
     if (!image) {
       return console.warn(`return for img define ${image}`)
     }
 
     if (!isDom<HTMLImageElement>(image)) {
       image = await new Promise<HTMLImageElement>((resolve, reject) => {
-        const img = new Image()
-        img.src = image as string
-        img.onload = async () => {
-          if (frontColor && setFrontColor) {
-            // console.time()
-            try {
-              const result = await analyze(image, { scale: 0.2 })
-              const bgColorRgb = result[0].color
-              const bgColorNum = bgColorRgb.split('rgb(')[1].slice(0, -1)
-              const splitArr = bgColorNum.split(',')
-              const hex = getHex(Number(splitArr[0]), Number(splitArr[1]), Number(splitArr[2]))
-              if (!userSetColor?.value) {
-                setFrontColor('#' + hex)
-              }
-            } catch {}
-            // console.timeEnd()
-
-            // const canvas = document.createElement('canvas')
-            // const maxVal = getRgba(canvas, this)
-            // console.log('maxVal:', maxVal)
-            // const splitArr = maxVal.split(',')
-            // const hex = getHex(Number(splitArr[0]), Number(splitArr[1]), Number(splitArr[2]))
-            // if (!userSetColor?.value) {
-            //   setFrontColor('#' + hex)
-            // }
-          }
-
-          resolve(img)
-        }
-        img.onerror = () => {
-          console.log('img error')
-          ElMessage.error('图片渲染失败：' + filePath)
-          reject()
-        }
-        img.onabort = () => {
-          console.log('img aborted')
-          reject()
-        }
+        // const img = new Image()
+        // img.src = image as string
+        // img.onload = async () => {
+        //   if (frontColor && setFrontColor) {
+        //     // console.time()
+        //     try {
+        //       const result = await analyze(image, { scale: 0.2 })
+        //       const bgColorRgb = result[0].color
+        //       const bgColorNum = bgColorRgb.split('rgb(')[1].slice(0, -1)
+        //       const splitArr = bgColorNum.split(',')
+        //       const hex = getHex(Number(splitArr[0]), Number(splitArr[1]), Number(splitArr[2]))
+        //       if (!userSetColor?.value) {
+        //         setFrontColor('#' + hex)
+        //       }
+        //     } catch {}
+        //     // console.timeEnd()
+
+        //     // const canvas = document.createElement('canvas')
+        //     // const maxVal = getRgba(canvas, this)
+        //     // console.log('maxVal:', maxVal)
+        //     // const splitArr = maxVal.split(',')
+        //     // const hex = getHex(Number(splitArr[0]), Number(splitArr[1]), Number(splitArr[2]))
+        //     // if (!userSetColor?.value) {
+        //     //   setFrontColor('#' + hex)
+        //     // }
+        //   }
+
+        //   resolve(img)
+        // }
+        // img.onerror = () => {
+        //   console.log('img error')
+        //   ElMessage.error('图片渲染失败：' + filePath)
+        //   reject()
+        // }
+        // img.onabort = () => {
+        //   console.log('img aborted')
+        //   reject()
+        // }
+
+        autoLoadImage(image, 0)
+          .then(async (resultImg: any) => {
+            if (frontColor && setFrontColor) {
+              try {
+                const result = await analyze(image, { scale: 0.2 })
+                const bgColorRgb = result[0].color
+                const bgColorNum = bgColorRgb.split('rgb(')[1].slice(0, -1)
+                const splitArr = bgColorNum.split(',')
+                const hex = getHex(Number(splitArr[0]), Number(splitArr[1]), Number(splitArr[2]))
+                if (!userSetColor?.value) {
+                  setFrontColor('#' + hex)
+                }
+              } catch {}
+            }
+            resolve(resultImg)
+          })
+          .catch(() => {
+            reject()
+          })
       })
     }
     return image