openSourceRemote/mind-map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix：修复节点数量很多的情况下，导出图片节点显示不全的问题

Browse Source
This commit is contained in:
街角小林 2025-04-10 18:08:39 +08:00
parent e80890aa7e
commit be38eb2ca6
1 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
simple-mind-map/src/plugins/Export.js
View File

@ -144,6 +144,7 @@ class Export {
try { try {
const canvas = document.createElement('canvas') const canvas = document.createElement('canvas')
const dpr = Math.max(window.devicePixelRatio, minExportImgCanvasScale) const dpr = Math.max(window.devicePixelRatio, minExportImgCanvasScale)
// 图片原始大小
let imgWidth = img.width let imgWidth = img.width
let imgHeight = img.height let imgHeight = img.height
// 如果是裁减操作的话，那么需要手动添加内边距，及调整图片大小为实际的裁减区域的大小，不要忘了内边距哦 // 如果是裁减操作的话，那么需要手动添加内边距，及调整图片大小为实际的裁减区域的大小，不要忘了内边距哦
@ -184,6 +185,8 @@ class Export {
} }
// 检查是否超出canvas支持的像素上限 // 检查是否超出canvas支持的像素上限
// canvas大小需要乘以dpr // canvas大小需要乘以dpr
let scaleX = 1
let scaleY = 1
let canvasWidth = (fitBgImgWidth || imgWidth) * dpr let canvasWidth = (fitBgImgWidth || imgWidth) * dpr
let canvasHeight = (fitBgImgHeight || imgHeight) * dpr let canvasHeight = (fitBgImgHeight || imgHeight) * dpr
if (canvasWidth > maxCanvasSize || canvasHeight > maxCanvasSize) { if (canvasWidth > maxCanvasSize || canvasHeight > maxCanvasSize) {
@ -203,6 +206,8 @@ class Export {
newWidth, newWidth,
newHeight newHeight
) )
scaleX = res[0] / canvasWidth
scaleY = res[1] / canvasHeight
canvasWidth = res[0] canvasWidth = res[0]
canvasHeight = res[1] canvasHeight = res[1]
} }
@ -210,6 +215,7 @@ class Export {
canvas.height = canvasHeight canvas.height = canvasHeight
const styleWidth = canvasWidth / dpr const styleWidth = canvasWidth / dpr
const styleHeight = canvasHeight / dpr const styleHeight = canvasHeight / dpr
// canvas元素实际上的大小
canvas.style.width = styleWidth + 'px' canvas.style.width = styleWidth + 'px'
canvas.style.height = styleHeight + 'px' canvas.style.height = styleHeight + 'px'
const ctx = canvas.getContext('2d') const ctx = canvas.getContext('2d')
@ -221,9 +227,9 @@ class Export {
// 图片绘制到canvas里 // 图片绘制到canvas里
// 如果有裁减数据，那么需要进行裁减 // 如果有裁减数据，那么需要进行裁减
const fitBgLeft = const fitBgLeft =
fitBgImgWidth > 0 ? (fitBgImgWidth - imgWidth) / 2 : 0 (fitBgImgWidth > 0 ? (fitBgImgWidth - imgWidth) / 2 : 0) * scaleX
const fitBgTop = const fitBgTop =
fitBgImgHeight > 0 ? (fitBgImgHeight - imgHeight) / 2 : 0 (fitBgImgHeight > 0 ? (fitBgImgHeight - imgHeight) / 2 : 0) * scaleY
if (clipData) { if (clipData) {
ctx.drawImage( ctx.drawImage(
img, img,
@ -231,13 +237,19 @@ class Export {
clipData.top, clipData.top,
clipData.width, clipData.width,
clipData.height, clipData.height,
paddingX + fitBgLeft, paddingX * scaleX + fitBgLeft,
paddingY + fitBgTop, paddingY * scaleY + fitBgTop,
clipData.width, clipData.width * scaleX,
clipData.height clipData.height * scaleY
) )
} else { } else {
ctx.drawImage(img, fitBgLeft, fitBgTop, imgWidth, imgHeight) ctx.drawImage(
img,
fitBgLeft,
fitBgTop,
imgWidth * scaleX,
imgHeight * scaleY
)
} }
resolve(canvas.toDataURL(format)) resolve(canvas.toDataURL(format))
} catch (error) { } catch (error) {