生成海报前将远程图片转化为base64

src/hooks/common.js

@@ -22,4 +22,32 @@ export function isWeiXin(){
         console.log('在微信浏览器中', flag)
     }
     return flag
+}
+
+/**
+ * 将远程图片转化为base64
+ * url 远程图片地址
+ */
+export function transfImgTobase64(url) { 
+    return new Promise((resolve,reject)=>{
+        const image = new Image();
+        image.crossOrigin = 'Anonymous';
+        image.onload =()=>{
+            const canvas = document.createElement('canvas');
+            canvas.width = image.width;
+            canvas.height = image.height;
+
+            const context = canvas.getContext('2d');
+            context.drawImage(image, 0, 0);
+
+            const base64 = canvas.toDataURL('image/png');
+
+            resolve(base64)
+        }
+        image.onerror = function (e) {
+            console.log('图片加载失败',e);
+            resolve(url);
+        };
+        image.src = url;
+    })
 }

src/views/report/chapter/List.vue

@@ -9,6 +9,7 @@ import { useWindowSize } from '@vueuse/core'
 import {useCachedViewsStore} from '@/store/modules/cachedViews'
 import EditBaseInfo from './components/EidtBaseInfo.vue'
 import html2canvas from "html2canvas";
+import {transfImgTobase64} from '@/hooks/common'
 
 const cachedViewsStore=useCachedViewsStore()
 const { width, height } = useWindowSize()
@@ -218,6 +219,8 @@ async function handleShowPoster(item){
         }
     }
     chapterItemPosterInfo.value=item
+    chapterItemPosterInfo.value.TypeEditImg=await transfImgTobase64(chapterItemPosterInfo.value.TypeEditImg)
+    chapterItemPosterInfo.value.QRCodeImg=await transfImgTobase64(chapterItemPosterInfo.value.QRCodeImg)
 
     nextTick(()=>{
         const targetEl = document.getElementById('chapter-poster-box');