@leafer-ui/worker
在 WebWorker 环境中运行。
安装
sh
npm install @leafer-ui/worker
sh
pnpm add @leafer-ui/worker
sh
yarn add @leafer-ui/worker
sh
bun add @leafer-ui/worker
importScripts 引入
通过全局变量 LeaferUI 访问内部功能。
js
importScripts('https://unpkg.com/@leafer-ui/worker@1.0.9/dist/worker.min.js')
js
importScripts('https://unpkg.com/@leafer-ui/worker@1.0.9/dist/worker.js')
https://unpkg.com 无法访问时,可替换为 https://cdn.jsdelivr.net/npm
体验
通过 Worker 创建一张包含矩形的画布,并在主线程生成图片显示。
js
const worker = new Worker('./worker.js') // 相对当前运行的根目录
worker.onmessage = (e) => { // 通过worker生成一张图片进行显示
const image = new Image()
image.src = e.data
document.body.appendChild(image)
}
js
// 你也可以使用npm包模式,编译成js文件供worker调用
importScripts(
'https://unpkg.com/@leafer-ui/worker@1.0.9/dist/worker.min.js'
)
const { Leafer, Rect } = LeaferUI
const leafer = new Leafer({ width: 800, height: 600 })
leafer.add(Rect.one({ fill: '#32cd79' }, 100, 100))
leafer.export('jpg').then((result) => {
self.postMessage(result.data)
})