fix: html-to-image 对于包含 foreignObject 的元素无法处理

src/components/ColorPicker/index.vue

@@ -83,6 +83,8 @@ import Hue from './Hue.vue'
 import Saturation from './Saturation.vue'
 import EditableInput from './EditableInput.vue'
 
+import { message } from 'ant-design-vue'
+
 const RECENT_COLORS = 'RECENT_COLORS'
 
 const presetColorConfig = [
@@ -219,7 +221,11 @@ export default defineComponent({
 
       const { left, top } = targetRef.getBoundingClientRect()
 
-      const filter = (node: HTMLElement) => !(node.classList && node.classList.contains('operate'))
+      const filter = (node: HTMLElement) => {
+        if (node.tagName && node.tagName.toUpperCase() === 'FOREIGNOBJECT') return false
+        if (node.classList && node.classList.contains('operate')) return false
+        return true
+      }
 
       toCanvas(targetRef, { filter, fontEmbedCSS: '' }).then(canvasRef => {
         canvasRef.style.cssText = `position: absolute; top: ${top}px; left: ${left}px; cursor: crosshair;`
@@ -268,6 +274,9 @@ export default defineComponent({
         canvasRef.addEventListener('mousemove', handleMousemove)
         canvasRef.addEventListener('mouseleave', handleMouseleave)
         window.addEventListener('mousedown', handleMousedown)
+      }).catch(() => {
+        message.error('取色吸管初始化失败')
+        document.body.removeChild(maskRef)
       })
     }
 

src/hooks/useExport.ts

@@ -15,6 +15,7 @@ import { message } from 'ant-design-vue'
 interface ExportImageConfig {
   quality: number;
   width: number;
+  filter: (node: HTMLElement) => boolean;
   fontEmbedCSS?: string;
 }
 
@@ -31,9 +32,15 @@ export default () => {
     setTimeout(() => {
       if (!domRef) return
 
+      const filter = (node: HTMLElement) => {
+        if (node.tagName && node.tagName.toUpperCase() === 'FOREIGNOBJECT') return false
+        return true
+      }
+
       const config: ExportImageConfig = {
         quality,
         width: 1600,
+        filter,
       }
 
       if (ignoreWebfont) config.fontEmbedCSS = ''