跨域保存图片

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

@@ -228,7 +228,6 @@ export default defineComponent({
       })
     })
     const imgTobase64 = (_img: any) => {
-      console.log("🚀 ~ _img:", _img.width, _img.offsetWidth)
       const _canvas = document.createElement('canvas')
       _canvas.width = _img.width
       _canvas.height = _img.height
@@ -245,7 +244,7 @@ export default defineComponent({
         duration: 0
       })
       const _img = document.createElement('img')
-      _img.crossOrigin = 'Anonymous'
+      _img.crossOrigin = 'anonymous'
       _img.onload = async () => {
         const base64 = imgTobase64(_img)
         // console.log("🚀 ~ base64:", base64)
@@ -467,6 +466,14 @@ export default defineComponent({
           onChange={(index: number) => (viewImage.downIndex = index)}
         >
           {{
+            image: ({ src }) => (
+              <img
+                crossorigin="anonymous"
+                src={src}
+                class="van-image__img"
+                style="object-fit: contain;"
+              />
+            ),
             cover: () => (
               <div class={styles.downBtn} onClick={() => saveImg()}>
                 <img src={iconDown} />

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

@@ -15,7 +15,7 @@ import {
   showLoadingToast,
   showSuccessToast
 } from 'vant'
-import { computed, defineComponent, onMounted, reactive, TransitionGroup, ref } from 'vue'
+import { computed, defineComponent, onMounted, reactive, TransitionGroup, ref, nextTick } from 'vue'
 import { useRoute } from 'vue-router'
 import styles from './index.module.less'
 import iconImage from '../images/icon-photo-default.png'
@@ -100,10 +100,11 @@ export default defineComponent({
     }
     const imgTobase64 = (_img: any) => {
       const _canvas = document.createElement('canvas')
-      _canvas.width = _img.offsetWidth
-      _canvas.height = _img.offsetHeight
+      _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 () => {
@@ -116,8 +117,8 @@ export default defineComponent({
       const _img = document.createElement('img')
       _img.crossOrigin = 'anonymous'
       _img.onload = async () => {
+        // console.log("🚀 ~ base64:", base64)
         const base64 = imgTobase64(_img)
-        console.log("🚀 ~ base64:", base64)
         try {
           const res = await promisefiyPostMessage({
             api: 'savePicture',
@@ -194,6 +195,14 @@ export default defineComponent({
           onChange={(index: number) => (data.downIndex = index)}
         >
           {{
+            image: ({ src }) => (
+              <img
+                crossorigin="anonymous"
+                src={src}
+                class="van-image__img"
+                style="object-fit: contain;"
+              />
+            ),
             cover: () => (
               <div class={styles.downBtn} onClick={() => saveImg()}>
                 <img src={iconDown} />