跨域导出

src/views/coursewarePlay/component/tools/pen.tsx

@@ -20,12 +20,12 @@ export default defineComponent({
     const { show } = toRefs(props)
     const firstRender = ref(true)
     const src = /(localhost|192)/.test(location.host)
-      ? 'http://192.168.3.114:3000/' // 'https://test.lexiaoya.cn/whiteboard-noCollab'
+      ? 'https://test.lexiaoya.cn/whiteboard-noCollab'
       : `${location.origin}/whiteboard-noCollab`
 
     const exportImg = (event: MessageEvent) => {
       const data = event.data
-      console.log('🚀 ~ event:', event)
+      // console.log('🚀 ~ event:', data)
       if (data.api === 'excalidraw_exportImg') {
         imgs.base64 = data.base64
         imgs.exported = true
@@ -72,28 +72,33 @@ export default defineComponent({
       if (imgs.saveLoading) {
         return
       }
+      console.log('开始')
       imgs.saveLoading = true
-      // 判断是否已经生成图片
-      if (imgs.image) {
-        saveImg()
-      } else {
-        const container: any = document.getElementById(`app`)
-        html2canvas(container, {
-          allowTaint: true,
-          useCORS: true,
-          backgroundColor: null
+      const container: any = document.getElementById(`app`)
+      html2canvas(container, {
+        allowTaint: true,
+        useCORS: true,
+        backgroundColor: null
+      })
+        .then(async (canvas) => {
+          // console.log("🚀 ~ canvas:", canvas)
+          // document.body.appendChild(canvas)
+          // const url = await canvas.toDataURL()
+          try {
+            imgs.image = canvas.toDataURL()
+            
+          } catch (error) {
+            console.log(error)
+          }
+          console.log("🚀 ~ imgs.image:", imgs.image)
+          saveImg()
+        })
+        .catch((error) => {
+          console.log("🚀 ~ error:", error)
+          closeToast()
+          imgs.saveLoading = false
+          imgs.exported = false
         })
-          .then(async (canvas) => {
-            const url = canvas.toDataURL('image/png')
-            imgs.image = url
-            saveImg()
-          })
-          .catch(() => {
-            closeToast()
-            imgs.saveLoading = false
-            imgs.exported = false
-          })
-      }
     }
 
     return () => (
@@ -115,16 +120,13 @@ export default defineComponent({
           }}
         ></iframe>
         {imgs.exported ? (
-          <img class={styles.img} src={imgs.base64} />
+          <img crossorigin="anonymous" class={styles.img} src={imgs.base64} />
         ) : (
           <div
             class={styles.rightItem}
-            onClick={() => {
-              // onSaveImg()
-              // props.close()
-            }}
+            onClick={() => props.close()}
           >
-            <Icon name='close' size={30} color="#fff" />
+            <Icon name="close" size={30} color="#fff" />
           </div>
         )}
       </div>

src/views/coursewarePlay/component/video-play.tsx

@@ -149,6 +149,7 @@ export default defineComponent({
     return () => (
       <div class={styles.videoWrap}>
         <video
+          crossorigin="anonymous"
           style={{ width: '100%', height: '100%' }}
           src={item.value.content}
           ref={videoRef}

src/views/coursewarePlay/index.tsx

@@ -653,7 +653,7 @@ export default defineComponent({
     }
 
     return () => (
-      <div class={styles.playContent}>
+      <div id="playContent" class={styles.playContent}>
         <div
           onClick={() => {
             clearTimeout(activeData.timer)
@@ -747,7 +747,7 @@ export default defineComponent({
                         </Transition>
                       </>
                     ) : m.type === 'IMG' ? (
-                      <img src={m.content} />
+                      <img crossorigin="anonymous" src={m.content} />
                     ) : (
                       <MusicScore
                         activeModel={activeData.model}