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

This commit is contained in:
街角小林
2025-04-10 18:08:39 +08:00
parent e80890aa7e
commit be38eb2ca6

View File

@@ -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) {