feat: try fix svg+xml decode (#34)

src/embed-css-style-image.ts

@@ -20,7 +20,7 @@ export function embedCssStyleImage(
       if (!value) {
         return null
       }
-      if ((IN_SAFARI || IN_FIREFOX) && value.includes('data:image/svg+xml')) {
+      if (IN_SAFARI || IN_FIREFOX) {
         context.drawImageCount++
       }
       return replaceCssUrlToDataUrl(value, null, context, true).then(newValue => {

src/embed-image-element.ts

@@ -25,7 +25,7 @@ export function embedImageElement<T extends HTMLImageElement | SVGImageElement>(
       ]
     }
 
-    if ((IN_SAFARI || IN_FIREFOX) && originalSrc.includes('data:image/svg+xml')) {
+    if (IN_SAFARI || IN_FIREFOX) {
       context.drawImageCount++
     }
   } else if (isSVGElementNode(clone) && !isDataUrl(clone.href.baseVal)) {

src/fetch.ts

@@ -1,5 +1,5 @@
-import { IN_SAFARI, blobToDataUrl, consoleWarn } from './utils'
-import type { Context, Request } from './context'
+import { IN_FIREFOX, IN_SAFARI, blobToDataUrl, consoleWarn } from './utils'
+import type { Context } from './context'
 
 export type BaseFetchOptions = RequestInit & {
   url: string
@@ -53,19 +53,18 @@ export function contextFetch(context: Context, options: ContextFetchOptions) {
     workers,
   } = context
 
-  let request: Request
+  if (requestType === 'image' && (IN_SAFARI || IN_FIREFOX)) {
+    context.drawImageCount++
+  }
 
-  if (!requests.has(rawUrl)) {
+  let request = requests.get(rawUrl)
+  if (!request) {
     // cache bypass so we dont have CORS issues with cached images
     // ref: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache
     if (bypassingCache) {
       url += (/\?/.test(url) ? '&' : '?') + new Date().getTime()
     }
 
-    if (requestType === 'image' && IN_SAFARI) {
-      context.drawImageCount++
-    }
-
     const baseFetchOptions: BaseFetchOptions = {
       url,
       timeout,
@@ -86,8 +85,8 @@ export function contextFetch(context: Context, options: ContextFetchOptions) {
         ? new Promise((resolve, reject) => {
           const worker = workers[requests.size & (workers.length - 1)]
           worker.postMessage({ rawUrl, ...baseFetchOptions })
-          request.resovle = resolve
-          request.reject = reject
+          request!.resovle = resolve
+          request!.reject = reject
         })
         : baseFetch(baseFetchOptions)
     ).catch(error => {
@@ -104,8 +103,6 @@ export function contextFetch(context: Context, options: ContextFetchOptions) {
     }) as any
 
     requests.set(rawUrl, request)
-  } else {
-    request = requests.get(rawUrl)!
   }
 
   return request.response

src/image-to-canvas.ts

@@ -25,13 +25,15 @@ export async function imageToCanvas<T extends HTMLImageElement>(
 
   drawImage()
 
-  for (let i = 0; i < drawImageCount; i++) {
-    await new Promise<void>(resolve => {
-      setTimeout(() => {
-        drawImage()
-        resolve()
-      }, i + drawImageInterval)
-    })
+  if (context.isEnable('fixSvgXmlDecode')) {
+    for (let i = 0; i < drawImageCount; i++) {
+      await new Promise<void>(resolve => {
+        setTimeout(() => {
+          drawImage()
+          resolve()
+        }, i + drawImageInterval)
+      })
+    }
   }
 
   context.drawImageCount = 0

src/options.ts

@@ -142,11 +142,18 @@ export interface Options {
      * default: true
      */
     removeControlCharacter?: boolean
+
+    /**
+     * Fix svg+xml image decode (for Safari、Firefox)
+     *
+     * default: true
+     */
+    fixSvgXmlDecode?: boolean
   }
 
   /**
    * Canvas `drawImage` interval
-   * is used to fix errors in decoding images in safari/webkit
+   * is used to fix errors in decoding images in Safari、Firefox
    *
    * default: 100
    */