fix(extension): 删去snapshot无用代码和修复文档存在的错误

Author: fanyang

packages/extension/src/tools/snapshot/README.md

@@ -82,11 +82,13 @@ getSnapshot(fileName?: string, toImageOptions?: ToImageOptions) : Promise<void>
 | width | number | - | | 自定义导出图片的宽度，不设置即可，设置可能会拉伸图形 |
 | height | numebr | - | | 自定义导出图片的宽度，不设置即可，设置可能会拉伸图形 |
 | backgroundColor | string | - | | 图片背景，不设置背景默认透明 |
-| quality | number | - | | 图片质量，在指定图片格式为 jpeg 或 webp 的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。 |
+| quality | number | - | | 图片质量，在指定图片格式为 jpeg 或 webp 的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他不合法参数会被忽略 |
 | padding | number | 40 | | 图片内边距: 元素内容所在区之外空白空间，不设置默认有40的内边距 |
-| partialElement | boolean | false |  |开启局部渲染后，默认不会导出不在画布区域的元素，开启后，将会导出 |
+| partialElement | boolean | false |  |开启局部渲染后，默认不会导出已经移出画布区域的元素，开启后，将会导出 |
 
-注意, `svg`目前暂不支持`width`，`height`， `backgroundColor`， `padding` 属性。
+注意：
+-  `svg`目前暂不支持`width`，`height`， `backgroundColor`， `padding` 属性。
+- 自定义宽高后，可能会拉伸图形，这时候`padding`也会被拉伸导致不准确。
 
 ### lf.getSnapshotBlob(...)
 
@@ -112,7 +114,7 @@ console.log(blob)
 ```tsx | pure
 
 export type SnapshotResponse = {
-  data: Blob | string
+  data: Blob | string // Blob对象 或 Base64文本编码文本
   width: number // 图片宽度
   height: number // 图片高度
 }
@@ -121,7 +123,7 @@ export type SnapshotResponse = {
 
 ### lf.getSnapshotBase64(...)
 
-获取`Base64文本编码`对象。
+获取`Base64文本编码`文本。
 
 ```ts
 

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

@@ -250,7 +250,7 @@ export class Snapshot {
       partialElement,
     } = toImageOptions
     // const copy = await this.cloneSvg(svg, toImageOptions)
-    // TODO: 为什么用上面封装的cloneSvg代替下面的方式不行
+    // TODO: question1:为什么用上面封装的cloneSvg代替下面的方式不行
     const partial = this.lf.graphModel.partial
     // 如何开启局部渲染，并要导出全部元素，需要临时关闭局部渲染
     partial && partialElement && (await this.lf.graphModel.setPartial(false))
@@ -335,6 +335,7 @@ export class Snapshot {
         ctx.clearRect(0, 0, canvas.width, canvas.height)
       }
     }
+    // TODO: question1: 初步排查是css这块上移后不生效，但不知道为什么
     // 设置css样式
     const img = new Image()
     const style = document.createElement('style')
@@ -350,37 +351,29 @@ export class Snapshot {
             createImageBitmap(img, {
               resizeWidth:
                 width && height
-                  ? copyCanvas(canvas, width, height, padding, dpr).width
+                  ? copyCanvas(canvas, width, height).width
                   : canvas.width,
               resizeHeight:
                 width && height
-                  ? copyCanvas(canvas, width, height, padding, dpr).height
+                  ? copyCanvas(canvas, width, height).height
                   : canvas.height,
             }).then((imageBitmap) => {
               ctx?.drawImage(imageBitmap, padding / dpr, padding / dpr)
               resolve(
-                width && height
-                  ? copyCanvas(canvas, width, height, padding, dpr)
-                  : canvas,
+                width && height ? copyCanvas(canvas, width, height) : canvas,
               )
             })
           } else {
             ctx?.drawImage(img, padding / dpr, padding / dpr)
             resolve(
-              width && height
-                ? copyCanvas(canvas, width, height, padding, dpr)
-                : canvas,
+              width && height ? copyCanvas(canvas, width, height) : canvas,
             )
           }
           // 如果局部渲染本来是开启的，继续开启
           partial && this.lf.graphModel.setPartial(true)
         } catch (e) {
           ctx?.drawImage(img, padding / dpr, padding / dpr)
-          resolve(
-            width && height
-              ? copyCanvas(canvas, width, height, padding, dpr)
-              : canvas,
-          )
+          resolve(width && height ? copyCanvas(canvas, width, height) : canvas)
         }
       }
 

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

@@ -142,20 +142,13 @@ export function copyCanvas(
   originCanvas: HTMLCanvasElement,
   targetWidth: number,
   targetHeight: number,
-  padding: number,
-  dpr: number,
 ): HTMLCanvasElement {
   const newCanvas = document.createElement('canvas')
   newCanvas.width = targetWidth
   newCanvas.height = targetHeight
-
-  const scaleX = originCanvas.width / targetWidth
-  const scaleY = originCanvas.height / targetHeight
-  console.log(padding, dpr, scaleX, scaleY)
-
   const newCtx = newCanvas.getContext('2d')
   if (newCtx) {
-    // TODO: 自定义宽高时 padding异常
+    // 注意: 自定义宽高时，可能会拉伸图形，这时候padding也会被拉伸导致不准确
     newCtx.drawImage(
       originCanvas,
       0,