From 8c175367a3a0628b306941c83efa5d6ab8f4dcb7 Mon Sep 17 00:00:00 2001 From: wux_labs Date: Sat, 3 May 2025 00:19:25 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=9B=BE=E7=89=87=E5=AF=BC?= =?UTF-8?q?=E5=87=BA=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../menus/toolbar/export/ExportImage.ts | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/components/menus/toolbar/export/ExportImage.ts b/src/components/menus/toolbar/export/ExportImage.ts index 14bcd7d..763d193 100644 --- a/src/components/menus/toolbar/export/ExportImage.ts +++ b/src/components/menus/toolbar/export/ExportImage.ts @@ -51,15 +51,29 @@ export class ExportImage extends HTMLElement implements UAIEditorEventListener { // 定义按钮点击事件，导出文件 this.addEventListener("click", async () => { if (this.menuButtonOptions.enable) { - const content = document.querySelector(".uai-zoomable-content") as HTMLElement; + const container = document.createElement("div"); + const content = document.createElement("div"); + document.body.appendChild(container); + container.appendChild(content); + + const value = document.querySelector(".uai-zoomable-content") as HTMLElement; + container.style.width = `${value.clientWidth}px`; + container.style.height = `${value.clientHeight}px`; + container.style.padding = '30px 50px'; + container.style.backgroundColor = '#fff'; + + content.style.width = `${value.clientWidth - 100}px`; + content.innerHTML = value.innerHTML; + const { toBlob } = domtoimage; - const blob = await toBlob(content, { + const blob = await toBlob(container, { style: { transform: 'scale(1)', // 如果需要的话，可以通过transform来缩放元素 transformOrigin: 'top left', // 设置变换的原点 } }); - saveAs(blob, `export-${Date.now()}.jpg`,); + saveAs(blob, `export-${Date.now()}.png`,); + document.body.removeChild(container); } }) }