@leafer-ui/worker

web version    worker version    node version    mini-program version

Runs in a Web Worker multi-threaded background environment and cannot access the DOM.

The web version and worker version can coexist in the same project and be used on demand.

Built on top of the cross-platform core package.

Installation

npm

npm install @leafer-ui/worker

pnpm

pnpm add @leafer-ui/worker

yarn

yarn add @leafer-ui/worker

bun

bun add @leafer-ui/worker

Or import via importScripts

Access internal features through the global LeaferUI variable.

worker.min.js

importScripts('https://unpkg.com/@leafer-ui/worker@2.2.3/dist/worker.min.js')

worker.js

importScripts('https://unpkg.com/@leafer-ui/worker@2.2.3/dist/worker.js')

Updates

Learn how to quickly update versions.

Demo

Create a canvas with a rectangle in a Worker, and generate an image in the main thread for display.

index.js

const worker = new Worker('./worker.js') // 相对当前运行的根目录

worker.onmessage = (e) => { // 通过worker生成一张图片进行显示
    const image = new Image()
    image.src = e.data
    document.body.appendChild(image)
}

worker.js

// 你也可以使用npm包模式，编译成js文件供worker调用
importScripts('https://unpkg.com/@leafer-ui/worker@2.1.8/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)
})