屏幕截图导出 (Screenshot)

有些时候，我们画完一幅精美的业务流程，希望让后端或者测试老师能够马上审阅，或者是业务要求能点击按钮生成高保真的高清图片。

借助强大的开源库 html-to-image 等插件，我们能够很完美地从 yh-flow 的可视区 DOM 架构中剥离出一张毫无瑕疵的 PNG 图片。

NOTE

请注意，该用例依赖我们在您的工程内引入了独立的截图依赖：npm install html-to-image 或者 html2canvas。组件库本身坚持轻量纯净化的路线，不会内置这些臃肿的截图依赖。

导出示例

点击下方的“下载 PNG”按钮。代码将捕获当前视口内的 DOM 结构并触发浏览器下载。

节点 1

节点 2

节点 3

高保真导出

实现最佳实践

为确保截图清晰且没有样式破损或文本溢出，请遵循以下准则：

1. 强制背景颜色：大多数图片查看器在显示透明 PNG 时默认使用黑色背景。如果您不希望黑色文本变得不可见，请明确将 backgroundColor: '#ffffff' 传递给 toPng() 选项。
2. 定位特定容器：捕获内部的 .yh-flow 元素，而不是整个应用容器。这可以防止周围的工具栏或侧边栏污染生成的图像。
3. 高分辨率渲染：使用 pixelRatio: 2 生成“Retina”质量的图像，这些图像在放大或打印时仍能保持清晰。
4. 截图前自动居中：对于大型图表，最好在执行捕获之前通过编程方式调用 fitView()，以确保没有任何元素在当前视口之外被剪裁。