Skip to content

@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)
})

Released under the MIT License.