From 966cd156eb6fc20788fa4cd3d5018b81e6d2895f Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sun, 10 Apr 2022 13:34:25 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20html-to-image=20=E5=AF=B9=E4=BA=8E?=
 =?UTF-8?q?=E5=8C=85=E5=90=AB=20foreignObject=20=E7=9A=84=E5=85=83?=
 =?UTF-8?q?=E7=B4=A0=E6=97=A0=E6=B3=95=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ColorPicker/index.vue | 11 ++++++++++-
 src/hooks/useExport.ts               |  7 +++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/ColorPicker/index.vue b/src/components/ColorPicker/index.vue
index 011127f2..b8052171 100644
--- a/src/components/ColorPicker/index.vue
+++ b/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)
       })
     }
 
diff --git a/src/hooks/useExport.ts b/src/hooks/useExport.ts
index 7aa55119..22457f53 100644
--- a/src/hooks/useExport.ts
+++ b/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 = ''