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 = ''