mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-17 14:04:47 +08:00
Fix:修复节点数量很多的情况下,导出图片节点显示不全的问题
This commit is contained in:
@@ -144,6 +144,7 @@ class Export {
|
||||
try {
|
||||
const canvas = document.createElement('canvas')
|
||||
const dpr = Math.max(window.devicePixelRatio, minExportImgCanvasScale)
|
||||
// 图片原始大小
|
||||
let imgWidth = img.width
|
||||
let imgHeight = img.height
|
||||
// 如果是裁减操作的话,那么需要手动添加内边距,及调整图片大小为实际的裁减区域的大小,不要忘了内边距哦
|
||||
@@ -184,6 +185,8 @@ class Export {
|
||||
}
|
||||
// 检查是否超出canvas支持的像素上限
|
||||
// canvas大小需要乘以dpr
|
||||
let scaleX = 1
|
||||
let scaleY = 1
|
||||
let canvasWidth = (fitBgImgWidth || imgWidth) * dpr
|
||||
let canvasHeight = (fitBgImgHeight || imgHeight) * dpr
|
||||
if (canvasWidth > maxCanvasSize || canvasHeight > maxCanvasSize) {
|
||||
@@ -203,6 +206,8 @@ class Export {
|
||||
newWidth,
|
||||
newHeight
|
||||
)
|
||||
scaleX = res[0] / canvasWidth
|
||||
scaleY = res[1] / canvasHeight
|
||||
canvasWidth = res[0]
|
||||
canvasHeight = res[1]
|
||||
}
|
||||
@@ -210,6 +215,7 @@ class Export {
|
||||
canvas.height = canvasHeight
|
||||
const styleWidth = canvasWidth / dpr
|
||||
const styleHeight = canvasHeight / dpr
|
||||
// canvas元素实际上的大小
|
||||
canvas.style.width = styleWidth + 'px'
|
||||
canvas.style.height = styleHeight + 'px'
|
||||
const ctx = canvas.getContext('2d')
|
||||
@@ -221,9 +227,9 @@ class Export {
|
||||
// 图片绘制到canvas里
|
||||
// 如果有裁减数据,那么需要进行裁减
|
||||
const fitBgLeft =
|
||||
fitBgImgWidth > 0 ? (fitBgImgWidth - imgWidth) / 2 : 0
|
||||
(fitBgImgWidth > 0 ? (fitBgImgWidth - imgWidth) / 2 : 0) * scaleX
|
||||
const fitBgTop =
|
||||
fitBgImgHeight > 0 ? (fitBgImgHeight - imgHeight) / 2 : 0
|
||||
(fitBgImgHeight > 0 ? (fitBgImgHeight - imgHeight) / 2 : 0) * scaleY
|
||||
if (clipData) {
|
||||
ctx.drawImage(
|
||||
img,
|
||||
@@ -231,13 +237,19 @@ class Export {
|
||||
clipData.top,
|
||||
clipData.width,
|
||||
clipData.height,
|
||||
paddingX + fitBgLeft,
|
||||
paddingY + fitBgTop,
|
||||
clipData.width,
|
||||
clipData.height
|
||||
paddingX * scaleX + fitBgLeft,
|
||||
paddingY * scaleY + fitBgTop,
|
||||
clipData.width * scaleX,
|
||||
clipData.height * scaleY
|
||||
)
|
||||
} else {
|
||||
ctx.drawImage(img, fitBgLeft, fitBgTop, imgWidth, imgHeight)
|
||||
ctx.drawImage(
|
||||
img,
|
||||
fitBgLeft,
|
||||
fitBgTop,
|
||||
imgWidth * scaleX,
|
||||
imgHeight * scaleY
|
||||
)
|
||||
}
|
||||
resolve(canvas.toDataURL(format))
|
||||
} catch (error) {
|
||||
|
||||
Reference in New Issue
Block a user