feat(site): 优化 snapshot 文章内容和图片

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

@@ -218,7 +218,7 @@ getSnapshotBlob(backgroundColor?: string, fileType?: string){
 
 The canvas has zooming and panning capabilities, meaning exporting the entire canvas is not practical. We need to export the smallest rectangle that encompasses all elements on the canvas, as shown below:
 
-![area](https://cdn.jsdelivr.net/gh/Logic-Flow/static@latest/docs/article/extension/snapshot/image.png)
+![area](https://cdn.jsdelivr.net/gh/Logic-Flow/static@latest/docs/article/extension/snapshot/image-g.png)
 
 The image above shows the smallest rectangle that needs to be exported. By adjusting the drawing area on the `canvas`, we can ensure that only the important parts of the canvas are exported.
 
@@ -236,7 +236,9 @@ This section only provides the general idea as understanding the source code req
 
 ### 2. Image Clarity on Export
 
-`canvas` draws images as bitmaps, and screen device pixel ratios need to be considered. You can get the device pixel ratio using `window.devicePixelRatio`. Adjust the export width and height of the `canvas` according to the device pixel ratio.
+The `canvas` renders graphics as a bitmap, where the image is composed of pixels, and the physical size of pixels in a `canvas` is fixed for the same width and height. On high-resolution displays, each point requires more physical pixels, which can make the `canvas` appear blurry. To address this, we need to adjust the pixel size of the `canvas` based on different resolution displays. By adjusting the width and height of the `canvas`, we can change the physical pixel size.
+
+Using `window.devicePixelRatio`, we can obtain the screen device pixel ratio and automatically adjust the `canvas` export width and height to match the physical pixel size for different resolution displays, thereby improving image clarity.
 
 ```ts
 const dpr = window.devicePixelRatio || 1;
@@ -250,6 +252,10 @@ const context = canvas.getContext('2d');
 context.scale(dpr, dpr);
 ```
 
+- **Clarity Enhancement**: When increasing `dpr`, you are effectively boosting the physical resolution of the `canvas`, resulting in a clearer image as each point contains more physical pixel information.
+
+- **Balancing Clarity and File Size**: A higher `dpr` results in larger image files, which can affect performance and load times. Typically, setting `dpr` to 2 or 3 strikes a good balance between improved clarity and reasonable file size.
+
 ### 3. Online Images Not Exporting Issue
 
 **Phenomenon**: When `svg` elements contain online images, whether as `image` SVG tags or `img` tags within `foreignObject`, these images do not appear in the exported image.

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

@@ -230,7 +230,7 @@ getSnapshotBlob(backgroundColor?: string, fileType?: string){
 
 画布具有放大缩小、平移能力，意味着导出整张画布是不现实的，我们只需要导出画布上元素集中在的一个最小矩形区域，如下图：
 
-![area](https://cdn.jsdelivr.net/gh/Logic-Flow/static@latest/docs/article/extension/snapshot/image.png)
+![area](https://cdn.jsdelivr.net/gh/Logic-Flow/static@latest/docs/article/extension/snapshot/image-g.png)
 
 上图展示了需要导出的最小矩形区域。通过调整 `canvas` 的绘制区域，我们可以确保只导出画布上重要的部分。
 
@@ -246,7 +246,9 @@ getSnapshotBlob(backgroundColor?: string, fileType?: string){
 
 ### 2. 导出图片清晰度
 
-`canvas` 绘制的图形是位图，需要考虑屏幕设备像素比，可以通过 `window.devicePixelRatio` 获取。需要根据设备像素比调整 `canvas` 的导出宽高。
+`canvas` 绘制的图形是位图，位图图像由像素构成，同一宽高的 `canvas` 物理像素大小是固定的。在高分辨率显示屏上，每个点需要更多物理像素，因而 `canvas` 会显得模糊，所以我们需要根据不同分辨率显示器来调整 `canvas` 像素大小，调整 `canvas` 宽高就可以调整物理像素大小。
+
+通过 `window.devicePixelRatio` 获取屏幕设备像素比，根据设备像素比自动调整 `canvas` 的导出宽高以调整物理像素大小来适配不同分辨率显示屏的图片清晰度。
 
 ```ts
 
@@ -262,6 +264,10 @@ context.scale(dpr, dpr);
 
 ```
 
+- **清晰度提升**: 当 `dpr` 增大时，你实际上是在提升 `canvas` 的物理分辨率，这样绘制的 `canvas` 的图像会更加清晰，因为每个点包含更多的物理像素信息。
+
+- **平衡清晰度和文件大小**: 较大的 `dpr` 会导致生成的图片文件更大，这可能会影响性能和加载时间。通常，设置 `dpr` 为 2 或 3 可以获得较好的清晰度和合理的文件大小平衡。
+
 ### 3. 在线图片无法导出问题
 
 **现象**： `svg` 元素中含有在线图片，不论是 `image` 原生 `svg` 图像标签，还是 `foreignObject` 中的 `img` 图像标签，导出图片后这些在线图片都会消失。