@logicflow/extension
Version:
LogicFlow Extensions
146 lines (96 loc) • 5.02 kB
Markdown
我们经常需要将画布内容通过图片的形式导出来，我们提供了一个独立的插件包 `Snapshot` 来使用这个功能。
两种注册方式，全局注册和局部注册，区别是全局注册每一个`lf`实例都可以使用。
```tsx | pure
import LogicFlow from "@logicflow/core";
import { Snapshot } from "@logicflow/extension";
// 全局注册
LogicFlow.use(Snapshot);
// 局部注册
const lf = new LogicFlow({
...config,
plugins: [Snapshot]
});
```
注册后，`lf`实例身上将被挂载`getSnapshot()`方法，通过`lf.getSnapshot()`方法调用。
```tsx | pure
// 可以使用任意方式触发，然后将绘制的图形下载到本地磁盘上
document.getElementById("button").addEventListener("click", () => {
lf.getSnapshot();
// 或者 1.1.13版本
// lf.extension.snapshot.getSnapshot()
});
```
值得一提的是：通过此插件截取下载的图片不会因为偏移、缩放受到影响。
当自定义元素在导出图片时需要额外添加 css 样式时，可以用如下方式实现：
为了保持流程图生成的图片与画布上效果一致，`snapshot`插件默认会将当前页面所有的 `css` 规则都加载到导出图片中,
但是可能会因为 css 文件跨域引起报错，参考 issue575。可以修改useGlobalRules来禁止加载所有 css
规则，然后通过`customCssRules`属性来自定义增加css样式。
```tsx
// 默认开启css样式
lf.extension.snapshot.useGlobalRules = true
// 不会覆盖css样式，会叠加，customCssRules优先级高
lf.extension.snapshot.customCssRules = `
.uml-wrapper {
line-height: 1.2;
text-align: center;
color: blue;
}
`
```
导出图片。
```ts
const getSnapshot = (fileName?: string, toImageOptions?: ToImageOptions): Promise<void> => {}
```
`fileName` 为文件名称，不填为默认为`logic-flow.当前时间戳`，`ToImageOptions` 描述如下：
| 属性名 | 类型 | 默认值 | 必填 | 描述 |
|-----------------|---------|-----|----|----------------------------------------------------------------------------------------|
| fileType | string | png | | 图片类型: 默认不填是png 还可以设置有webp、gif、jpeg、svg |
| width | number | - | | 自定义导出图片的宽度，不设置即可，设置可能会拉伸图形 |
| height | number | - | | 自定义导出图片的宽度，不设置即可，设置可能会拉伸图形 |
| backgroundColor | string | - | | 图片背景，不设置背景默认透明 |
| quality | number | - | | 图片质量，在指定图片格式为 jpeg 或 webp 的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他不合法参数会被忽略 |
| padding | number | 40 | | 图片内边距: 元素内容所在区之外空白空间，不设置默认有40的内边距 |
| partial | boolean | - | | 导出时是否开启局部渲染，false：将导出画布上所有的元素，true：只导出画面区域内的可见元素，不设置默认为lf实例身上partial值 |
注意：
- `svg`目前暂不支持`width`，`height`， `backgroundColor`， `padding` 属性。
- 自定义宽高后，可能会拉伸图形，这时候`padding`也会被拉伸导致不准确。
`snapshot`
除了支持图片类型导出，还支持下载<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Blob" target="_blank">
Blob文件对象 </a>
和 <a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Base64" target="_blank">
Base64文本编码 </a>
获取`Blob`对象。
```ts
const getSnapshotBlob = async (
backgroundColor?: string,
fileType?: string
): Promise<SnapshotResponse> => {}
// example
const { data: blob } = await lf.getSnapshotBlob()
console.log(blob)
```
`backgroundColor`: 背景，不填默认为透明。
`fileType`: 文件类型，不填默认为png。
`SnapshotResponse`: 返回对象。
```tsx | pure
export type SnapshotResponse = {
data: Blob | string // Blob对象 或 Base64文本编码文本
width: number // 图片宽度
height: number // 图片高度
}
```
获取`Base64文本编码`文本。
```ts
async getSnapshotBase64(backgroundColor?: string, fileType?: string) : Promise<SnapshotResponse>
// example
const { data : base64 } = await lf.getSnapshotBlob()
console.log(base64)