@logicflow/extension 2.2.0-alpha.4 → 2.2.0-alpha.5

package/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)
   }
 
   /**
@@ -389,76 +392,50 @@ export class Snapshot {
     // 计算实际宽高，考虑缩放因素
     // 在宽画布情况下，getBoundingClientRect可能无法获取到所有元素的边界
     // 因此我们添加一个安全系数来确保能够容纳所有元素
-    const safetyFactor = toImageOptions.safetyFactor || 1.1 // 安全系数，增加10%的空间
-    const actualWidth = (bbox.width / SCALE_X) * safetyFactor
-    const actualHeight = (bbox.height / SCALE_Y) * safetyFactor
+    const safetyFactor = toImageOptions.safetyFactor || 1 // 安全系数，增加10%的空间
+    const actualWidth = bbox.width / SCALE_X
+    const actualHeight = bbox.height / SCALE_Y
+    const factorWidth = actualWidth * (safetyFactor - 1)
+    const factorHeight = actualHeight * (safetyFactor - 1)
 
     // 包含所有元素的最小宽高，确保足够大以容纳所有元素
-    const bboxWidth = Math.ceil(actualWidth)
-    const bboxHeight = Math.ceil(actualHeight)
+    const bboxWidth = Math.ceil(actualWidth + factorWidth)
+    const bboxHeight = Math.ceil(actualHeight + factorHeight)
     const canvas = document.createElement('canvas')
     canvas.style.width = `${bboxWidth}px`
     canvas.style.height = `${bboxHeight}px`
 
     // 宽高值 默认加padding 40，保证图形不会紧贴着下载图片
     // 为宽画布添加额外的安全边距，确保不会裁剪
-    const safetyMargin = toImageOptions.safetyMargin || 40 // 额外的安全边距
-
-    // 获取当前浏览器类型，不同浏览器对canvas的限制不同
-    const { maxCanvasDimension, otherMaxCanvasDimension } =
-      this.getCanvasDimensionsByBrowser()
-    const MAX_CANVAS_DIMENSION = maxCanvasDimension
-    const OTHER_MAX_CANVAS_DIMENSION = otherMaxCanvasDimension
-
-    let targetWidth = bboxWidth * dpr + padding * 2 + safetyMargin
-    let targetHeight = bboxHeight * dpr + padding * 2 + safetyMargin
-    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
-    }
+    const safetyMargin = toImageOptions.safetyMargin || 0 // 额外的安全边距
+
+    let targetWidth = bboxWidth * dpr
+    let targetHeight = bboxHeight * dpr
 
-    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 + padding / dpr
-      }, ${
-        (-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) * scaleHeight + padding / dpr
-      })`
-    canvas.width = targetWidth
-    canvas.height = targetHeight
+      `matrix(${scaleRatio}, 0, 0, ${scaleRatio}, ${
+        (-offsetX + TRANSLATE_X) * (1 / SCALE_X) * scaleRatio +
+        padding +
+        factorWidth / 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
@@ -690,12 +667,6 @@ export class Snapshot {
     fileType?: string,
     toImageOptions?: ToImageOptions,
   ): Promise<SnapshotResponse> {
-    console.log(
-      'getSnapshotBase64---------------',
-      backgroundColor,
-      fileType,
-      toImageOptions,
-    )
     return await this.withExportPreparation(
       () => this._getSnapshotBase64(backgroundColor, fileType, toImageOptions),
       toImageOptions,