图片跨域保存

src/school/orchestra/compontent/photo-detail.tsx

@@ -227,45 +227,45 @@ export default defineComponent({
         return file.fileUrl
       })
     })
+    const imgTobase64 = (_img: any) => {
+      console.log("🚀 ~ _img:", _img.width, _img.offsetWidth)
+      const _canvas = document.createElement('canvas')
+      _canvas.width = _img.width
+      _canvas.height = _img.height
+      const ctx = _canvas.getContext('2d')
+      ctx?.drawImage(_img, 0, 0, _canvas.width, _canvas.height)
+      console.log(_img, _canvas)
+      return _canvas.toDataURL('image/png')
+    }
     const saveImg = async () => {
-      if (viewImage.downLoading) return
-      const container: HTMLElement = document.querySelector(
-        `img[src='${images.value[viewImage.downIndex]}']`
-      )!
-      if (container) {
-        const t = showLoadingToast({
-          message: '保存中',
-          duration: 0
-        })
-        viewImage.downLoading = true
-        html2canvas(container, {
-          allowTaint: true,
-          useCORS: true,
-          backgroundColor: null
-        })
-          .then(async (canvas) => {
-            const url = canvas.toDataURL('image/png')
-            const res = await promisefiyPostMessage({
-              api: 'savePicture',
-              content: {
-                base64: url
-              }
-            })
-            t.close()
-            if (res?.content?.status === 'success') {
-              showSuccessToast('保存成功')
-            } else {
-              showFailToast('保存失败')
+      const src = images.value[viewImage.downIndex]
+      if (viewImage.downLoading || !src) return
+      const t = showLoadingToast({
+        message: '保存中',
+        duration: 0
+      })
+      const _img = document.createElement('img')
+      _img.crossOrigin = 'Anonymous'
+      _img.onload = async () => {
+        const base64 = imgTobase64(_img)
+        // console.log("🚀 ~ base64:", base64)
+        try {
+          const res = await promisefiyPostMessage({
+            api: 'savePicture',
+            content: {
+              base64: base64
             }
           })
-          .catch(() => {
+          if (res?.content?.status === 'success') {
+            showSuccessToast('保存成功')
+          } else {
             showFailToast('保存失败')
-            t.close()
-          })
-          .finally(() => {
-            viewImage.downLoading = false
-          })
+          }
+        } catch (error) {}
+        t.close()
+        viewImage.downLoading = false
       }
+      _img.src = src
     }
     // 预览图片
     const onShowImage = (index: number) => {

src/views/mine-orchestra/photo-list/detail.tsx

@@ -98,45 +98,43 @@ export default defineComponent({
       //   onChange: (index: number) => (data.startPosition = index),
       // })
     }
+    const imgTobase64 = (_img: any) => {
+      const _canvas = document.createElement('canvas')
+      _canvas.width = _img.offsetWidth
+      _canvas.height = _img.offsetHeight
+      const ctx = _canvas.getContext('2d')
+      ctx?.drawImage(_img, 0, 0, _canvas.width, _canvas.height)
+      return _canvas.toDataURL('image/png')
+    }
     const saveImg = async () => {
-      if (data.downLoading) return
-      const container: HTMLElement = document.querySelector(
-        `img[src='${images.value[data.downIndex]}']`
-      )!
-      if (container) {
-        const t = showLoadingToast({
-          message: '保存中',
-          duration: 0
-        })
-        data.downLoading = true
-        html2canvas(container, {
-          allowTaint: true,
-          useCORS: true,
-          backgroundColor: null
-        })
-          .then(async (canvas) => {
-            const url = canvas.toDataURL('image/png')
-            const res = await promisefiyPostMessage({
-              api: 'savePicture',
-              content: {
-                base64: url
-              }
-            })
-            t.close()
-            if (res?.content?.status === 'success') {
-              showSuccessToast('保存成功')
-            } else {
-              showFailToast('保存失败')
+      const src = images.value[data.downIndex]
+      if (data.downLoading || !src) return
+      const t = showLoadingToast({
+        message: '保存中',
+        duration: 0
+      })
+      const _img = document.createElement('img')
+      _img.crossOrigin = 'anonymous'
+      _img.onload = async () => {
+        const base64 = imgTobase64(_img)
+        console.log("🚀 ~ base64:", base64)
+        try {
+          const res = await promisefiyPostMessage({
+            api: 'savePicture',
+            content: {
+              base64: base64
             }
           })
-          .catch(() => {
+          if (res?.content?.status === 'success') {
+            showSuccessToast('保存成功')
+          } else {
             showFailToast('保存失败')
-            t.close()
-          })
-          .finally(() => {
-            data.downLoading = false
-          })
+          }
+        } catch (error) {}
+        t.close()
+        data.downLoading = false
       }
+      _img.src = src
     }
 
     onMounted(() => {