✨ feat: 优化抓取 base64 图片方法

src/function/setting.ts

@@ -1,18 +1,20 @@
+type FetchBase64 = (url: string) => Promise<string>;
+
 interface Config {
-  fetch?: typeof fetch;
+  fetchBase64?: FetchBase64;
 }
 
 declare global {
   interface Window {
-    HTML2SKETCH_FETCH: typeof fetch;
+    HTML2SKETCH_FETCH_BASE64: (url: string) => Promise<string>;
   }
 }
 /**
  * 进行全局配置
  */
 export const setConfig = (config: Config) => {
-  const { fetch } = config;
-  if (typeof fetch === 'function') {
-    window.HTML2SKETCH_FETCH = fetch;
+  const { fetchBase64 } = config;
+  if (typeof fetchBase64 === 'function') {
+    window.HTML2SKETCH_FETCH_BASE64 = fetchBase64;
   }
 };

src/models/Layer/Bitmap.ts

@@ -1,14 +1,11 @@
 import BaseLayer from '../Base/BaseLayer';
 import { defaultExportOptions } from '../utils';
 import { uuid } from '../../utils/utils';
-import fetch from '../../utils/fetch';
+import { fetchBase64 } from '../../utils/fetch';
 
-import {
-  blobToBase64,
-  initImageURL,
-  getBase64ImageString,
-} from '../../utils/image';
-import { BaseLayerParams, SketchFormat } from '../../types';
+import { initImageURL } from '../../utils/image';
+import type { BaseLayerParams } from '../../types';
+import { SketchFormat } from '../../types';
 
 interface BitmapInitParams extends BaseLayerParams {
   url: string;
@@ -46,15 +43,13 @@ class Bitmap extends BaseLayer {
     if (!this.url.startsWith('http')) return;
 
     try {
-      const data = await fetch(this.url);
-      const blob = await data.blob();
-      const dataURL = await blobToBase64(blob);
-      const base64 = getBase64ImageString(dataURL);
+      const base64 = await fetchBase64(this.url);
       if (base64) {
         this.base64 = base64;
       }
     } catch (e) {
       console.warn('网络或图片资源可能存在问题...');
+      console.error(e);
     }
   }
 

src/models/Style/Image.ts

@@ -1,11 +1,7 @@
 import SketchFormat from '@sketch-hq/sketch-file-format-ts';
 import BaseStyle from '../Base/BaseStyle';
-import {
-  blobToBase64,
-  initImageURL,
-  getBase64ImageString,
-} from '../../utils/image';
-import fetch from '../../utils/fetch';
+import { initImageURL } from '../../utils/image';
+import { fetchBase64 } from '../../utils/fetch';
 
 /**
  * 图片资产
@@ -24,10 +20,8 @@ class Image extends BaseStyle {
    */
   async init() {
     if (this.url.startsWith('http')) {
-      const data = await fetch(this.url);
-      const blob = await data.blob();
-      const dataURL = await blobToBase64(blob);
-      const base64 = getBase64ImageString(dataURL);
+      const base64 = await fetchBase64(this.url);
+
       if (base64) {
         this.base64 = base64;
       }

src/utils/fetch.ts

@@ -1,6 +1,16 @@
-const innerFetch: typeof fetch = (input, init) => {
-  const _fetch = window.HTML2SKETCH_FETCH ?? fetch;
-  return _fetch(input, init);
-};
+import { blobToBase64, getBase64ImageString } from './image';
+
+/**
+ *
+ * @param url
+ */
+export const fetchBase64 = async (url: string) => {
+  if (window.HTML2SKETCH_FETCH_BASE64) {
+    return await window.HTML2SKETCH_FETCH_BASE64(url);
+  }
 
-export default innerFetch;
+  const data = await fetch(url);
+  const blob = await data.blob();
+  const dataURL = await blobToBase64(blob);
+  return getBase64ImageString(dataURL);
+};

src/utils/svg.ts

@@ -1,6 +1,5 @@
 // @ts-ignore
 import getSvgoInstance from 'svgo-browser/lib/get-svgo-instance';
-import fetch from './fetch';
 
 /**
  * svg 基本样式