From 0627109b2bf1dd27adef22a2d92ca9d57254b391 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B8=85=E6=9F=AF?=
 <10691891+qing_ke@user.noreply.gitee.com>
Date: Tue, 22 Apr 2025 03:36:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=80=9D=E7=BB=B4=E5=AF=BC?=
 =?UTF-8?q?=E5=9B=BE=E4=B8=8B=E8=BD=BD=E5=9B=BE=E7=89=87=E7=9A=84=E6=B8=85?=
 =?UTF-8?q?=E6=99=B0=E5=BA=A6=E4=BB=A5=E5=8F=8A=E8=A7=A3=E5=86=B3=E6=8B=96?=
 =?UTF-8?q?=E5=8A=A8=E3=80=81=E7=BC=A9=E6=94=BE=E6=93=8D=E4=BD=9C=E5=90=8E?=
 =?UTF-8?q?=E4=BC=9A=E4=B8=8B=E8=BD=BD=E5=9B=BE=E7=89=87=E4=B8=8D=E5=85=A8?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/MarkMap.vue | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/web/src/views/MarkMap.vue b/web/src/views/MarkMap.vue
index a9320347..c5f61c21 100644
--- a/web/src/views/MarkMap.vue
+++ b/web/src/views/MarkMap.vue
@@ -263,29 +263,35 @@ const getModelById = (modelId) => {
 }
 
 // download SVG to png file
-const downloadImage = () => {
+const downloadImage = async() => {
+  // 先自适应思维导图到可视化区域
+  await markMap.value.fit() 
+
   const svgElement = document.getElementById('markmap')
-  // 将 SVG 渲染到图片对象
   const serializer = new XMLSerializer()
   const source =
     '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(svgRef.value)
   const image = new Image()
   image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)
 
-  // 将图片对象渲染
+  // 分辨率倍数，越高图片越清晰，但文件越大
+  const scale = 4 
   const canvas = document.createElement('canvas')
-  canvas.width = svgElement.offsetWidth
-  canvas.height = svgElement.offsetHeight
+  canvas.width = svgElement.offsetWidth * scale
+  canvas.height = svgElement.offsetHeight * scale
+
   let context = canvas.getContext('2d')
   context.clearRect(0, 0, canvas.width, canvas.height)
   context.fillStyle = 'white'
   context.fillRect(0, 0, canvas.width, canvas.height)
 
   image.onload = function () {
+    // 关键：缩放 context
+    context.setTransform(scale, 0, 0, scale, 0, 0)
     context.drawImage(image, 0, 0)
     const a = document.createElement('a')
     a.download = 'geek-ai-xmind.png'
-    a.href = canvas.toDataURL(`image/png`)
+    a.href = canvas.toDataURL('image/png')
     a.click()
   }
 }