fix: snapshot插件导出图片受canvas的大小限制导致导出为空（计算规则、等比缩放）

Author: Mirrors406

packages/extension/src/tools/snapshot/index.ts

@@ -315,31 +315,34 @@ export class Snapshot {
   }
 
   /**
-   * 根据浏览器类型获取Canvas尺寸限制
-   * @returns 包含最大主维度和次维度的对象
+   * 根据浏览器对 canvas 的大小限制，计算等比缩放比例
+   * - 参考 MDN 最大的画布尺寸：
+   * https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/canvas#最大的画布尺寸
+   *
+   * @param width
+   * @param height
    */
-  private getCanvasDimensionsByBrowser(): {
-    maxCanvasDimension: number
-    otherMaxCanvasDimension: number
-  } {
-    const userAgent = navigator.userAgent
+  private getCanvasScaleRatio(width: number, height: number): number {
+    /* 单边最大像素 */
+    const maxCanvasSide = 32767
+    /* 最大像素面积 */
+    const maxCanvasArea = 268435456
 
-    // 默认值
-    let maxCanvasDimension = 65535
-    let otherMaxCanvasDimension = 4096
+    const area = width * height
 
     if (
-      userAgent.indexOf('Chrome') !== -1 ||
-      userAgent.indexOf('Edge') !== -1
+      width <= maxCanvasSide &&
+      height <= maxCanvasSide &&
+      area <= maxCanvasArea
     ) {
-      maxCanvasDimension = 65535
-      otherMaxCanvasDimension = 4096
-    } else if (userAgent.indexOf('Firefox') !== -1) {
-      maxCanvasDimension = 32767
-      otherMaxCanvasDimension = 3814
+      return 1
     }
 
-    return { maxCanvasDimension, otherMaxCanvasDimension }
+    const widthScale = maxCanvasSide / width
+    const heightScale = maxCanvasSide / height
+    const areaScale = maxCanvasArea / area
+
+    return Math.min(widthScale, heightScale, areaScale)
   }
 
   /**
@@ -406,62 +409,33 @@ export class Snapshot {
     // 为宽画布添加额外的安全边距，确保不会裁剪
     const safetyMargin = toImageOptions.safetyMargin || 0 // 额外的安全边距
 
-    // 获取当前浏览器类型，不同浏览器对canvas的限制不同
-    const { maxCanvasDimension, otherMaxCanvasDimension } =
-      this.getCanvasDimensionsByBrowser()
-    const MAX_CANVAS_DIMENSION = maxCanvasDimension
-    const OTHER_MAX_CANVAS_DIMENSION = otherMaxCanvasDimension
-
     let targetWidth = bboxWidth * dpr
     let targetHeight = bboxHeight * dpr
-    let scaleWidth = 1 //宽 缩放
-    let scaleHeight = 1 //高 缩放
-    // 对宽和高分别进行缩放，如chrome，矩形单边最大宽度不超过65535，如宽超过65535，那么高不能超过4096，否则像素会超，也会显示不出。
-    if (
-      targetWidth > MAX_CANVAS_DIMENSION &&
-      targetHeight > OTHER_MAX_CANVAS_DIMENSION
-    ) {
-      scaleWidth = MAX_CANVAS_DIMENSION / targetWidth
-      scaleHeight = OTHER_MAX_CANVAS_DIMENSION / targetHeight
-    } else if (
-      targetWidth > OTHER_MAX_CANVAS_DIMENSION &&
-      targetHeight > MAX_CANVAS_DIMENSION
-    ) {
-      scaleWidth = OTHER_MAX_CANVAS_DIMENSION / targetWidth
-      scaleHeight = MAX_CANVAS_DIMENSION / targetHeight
-    } else if (
-      targetWidth > MAX_CANVAS_DIMENSION &&
-      targetHeight < OTHER_MAX_CANVAS_DIMENSION
-    ) {
-      scaleHeight = scaleWidth = MAX_CANVAS_DIMENSION / targetWidth
-    } else if (
-      targetWidth < OTHER_MAX_CANVAS_DIMENSION &&
-      targetHeight > MAX_CANVAS_DIMENSION
-    ) {
-      scaleHeight = scaleWidth = MAX_CANVAS_DIMENSION / targetHeight
-    }
 
-    if (scaleWidth < 1 || scaleHeight < 1) {
-      targetWidth = Math.floor(targetWidth * scaleWidth)
-      targetHeight = Math.floor(targetHeight * scaleHeight)
+    // 超出 canvas 大小限制时，进行等比缩放
+    const scaleRatio = this.getCanvasScaleRatio(targetWidth, targetHeight)
+    if (scaleRatio < 1) {
+      targetWidth = Math.floor(targetWidth * scaleRatio)
+      targetHeight = Math.floor(targetHeight * scaleRatio)
     }
+
     // 将导出区域移动到左上角，canvas 绘制的时候是从左上角开始绘制的
     // 在transform矩阵中加入padding值，确保左侧元素不会被截断
     // 对这个矩阵进行缩放，否则会导致截断
     ;(copy.lastChild as SVGElement).style.transform =
-      `matrix(${scaleWidth}, 0, 0, ${scaleHeight}, ${
-        (-offsetX + TRANSLATE_X) * (1 / SCALE_X) * scaleWidth +
+      `matrix(${scaleRatio}, 0, 0, ${scaleRatio}, ${
+        (-offsetX + TRANSLATE_X) * (1 / SCALE_X) * scaleRatio +
         padding +
         factorWidth / 2 +
         safetyMargin
-      }, ${(-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) * scaleHeight + padding + factorHeight / 2 + safetyMargin})`
+      }, ${(-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) * scaleRatio + padding + factorHeight / 2 + safetyMargin})`
     canvas.width = targetWidth + (padding + safetyMargin) * 2 * dpr
     canvas.height = targetHeight + (padding + safetyMargin) * 2 * dpr
     const ctx = canvas.getContext('2d')
     if (ctx) {
       // 清空canvas
       ctx.clearRect(0, 0, canvas.width, canvas.height)
-      ctx.scale(dpr * scaleWidth, dpr * scaleHeight)
+      ctx.scale(dpr, dpr)
       // 如果有背景色，设置流程图导出的背景色
       if (backgroundColor) {
         ctx.fillStyle = backgroundColor

sites/docs/docs/tutorial/extension/snapshot.en.md

@@ -70,7 +70,7 @@ The export method supports the `toImageOptions` parameter with the following con
 - During export, the canvas will automatically handle wide canvas situations, adding safety factors and extra margins
 - During export, silent mode will be automatically enabled, disabling canvas interaction
 - Automatically converts relative path images in SVG to Base64 encoding <Badge type="warning">2.0.14 New</Badge>
-- When the image exceeds the browser's canvas limit, it will automatically scale the image size to ensure successful export, but it will affect image clarity
+- When the image exceeds the browser's canvas limit, it will automatically scale the image size proportionally to ensure successful export, but it will affect image clarity
 - You can fine-tune wide canvas behavior via `safetyFactor` and `safetyMargin` to avoid element cropping
 - If `partial` is not explicitly provided, it defaults to the current canvas partial rendering state; during export, the rendering mode may be temporarily switched and will be restored afterward
 - Anchors and rotate controls are automatically removed during export to prevent auxiliary elements from appearing in the image

sites/docs/docs/tutorial/extension/snapshot.zh.md

@@ -69,7 +69,7 @@ lf.getSnapshot('流程图');
 - 导出时会自动处理宽画布情况，添加安全系数和额外边距
 - 导出过程中会自动开启静默模式，禁用画布交互
 - 自动将SVG中的相对路径图片转换为Base64编码<Badge type="warning">2.0.14新增</Badge> 
-- 导出图片超过浏览器对canvas限制时，会自动缩放图片尺寸，确保导出成功，但会影响图片清晰度
+- 导出图片超过浏览器对canvas限制时，会自动等比缩放图片尺寸，确保导出成功，但会影响图片清晰度
 - 可通过 `safetyFactor` 与 `safetyMargin` 精细调整宽画布的安全余量，避免元素裁剪
 - `partial` 未显式传入时，默认沿用当前画布的局部渲染状态；导出期间如需切换渲染模式会临时切换并在导出完成后还原
 - 导出时会自动移除锚点与旋转控件，避免辅助元素进入图片