导出

会等待视图内所有网络资源都加载完再进行导出图片。

关键方法

export ( )

export( name: IExportFileType | string, options?: IExportOptions | number | boolean): Promise<IExportResult>

导出范围暂时只支持整个应用画布，后续会支持单个元素。

name 为文件名时表示保存文件。options 为数字时表示图片质量，为布尔时表示二进制数据。

type IExportFileType = 'jpg' | 'png' | 'webp' // 后续会支持 json、svg、pdf

interface IExportOptions {
  quality?: number // 设置 jpg / webp 的图片质量
  blob?: boolean // 导出二进制数据
}

interface IExportResult {
  data: IBlob | string | boolean // data为无时表示导出失败
}

归属

UI

示例

导出 Base64 编码数据

默认图片质量为 0.92。

import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

leafer.add(Rect.one({ fill: '#32cd79' }, 100, 100))

leafer.export('jpg').then(result => { 
    console.log(result.data)
})

// const result = await leafer.export('jpg')

手动设置图片质量。

import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

leafer.add(Rect.one({ fill: '#32cd79' }, 100, 100))

leafer.export('jpg', 0.5).then(result => { 
    console.log(result.data)
})

// const result = await leafer.export('jpg', {quality: 0.5})

导出二进制数据

import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

leafer.add(Rect.one({ fill: '#32cd79' }, 100, 100))

leafer.export('png', true).then(result => { 
    console.log(result.data)
})

// const result = await leafer.export('png', { blob: true })

导出文件

浏览器版会直接下载文件，Node.js 版会保存到指定路径。

import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

leafer.add(Rect.one({ fill: '#32cd79' }, 100, 100))

leafer.export('test.png') 

// const result = await leafer.export('./home/test.png')

导出 ​

关键方法 ​

export ( ) ​

归属 ​

UI ​

示例 ​

导出 Base64 编码数据 ​

导出二进制数据 ​

导出文件 ​

导出

关键方法

export ( )

归属

UI

示例

导出 Base64 编码数据

导出二进制数据

导出文件