bookcover-web
生成印刷就绪的书籍封面。部分 封套 一代系统。
npm install bookcover-web
这是图书封面生成器的浏览器包装器。它使用WASM编译覆盖 typst.ts.
看到 模式参考 这是作为参数传递的,它实际上配置了封面设计。
import {init, CoverGenerator} from 'bookcover-web'
init(options): Promise<CoverGenerator>
使用初始化的WASM编译器和可选的呈现器创建生成器实例。
interface InitOptions {
wasm_url: string // URL to typst_ts_web_compiler_bg.wasm
renderer_wasm_url?: string // URL to typst_ts_renderer_bg.wasm (required for SVG/PNG)
assets_prefix?: string // URL prefix for static assets (templates, frames, backgrounds)
fonts_prefix?: string // URL prefix for the fonts tree (manifest.json + families)
}
资产
Typst模板被捆绑在里面 bookcover-core 本身(绑到确切的安装)
版本-不需要设置)。生成仍然在运行时获取三种资源,没有
在npm包中包含:WASM二进制文件、frame images (frames/),以及字体
树。最简单的设置是托管树 https://assets.paper.bible/ (歌珥启用):
这个
typst/WASM二进制文件以brotli压缩方式存储并提供Content-Encoding: br每个客户端,没有内容协商-编译器是27 MB raw格式和6.9 MB压缩文件,所以这不是可选的。浏览器可以透明地处理它。如果你 从非浏览器客户端获取这些,确保它可以解码br(curl需要--compressed, 或者将压缩字节写入磁盘)。
// Match the wasm version to your installed @myriaddreamin/typst-ts-web-compiler version
const typst_version = '0.7.0'
const generator = await init({
wasm_url: `https://assets.paper.bible/typst/${typst_version}/typst_ts_web_compiler_bg.wasm`,
renderer_wasm_url: `https://assets.paper.bible/typst/${typst_version}/typst_ts_renderer_bg.wasm`,
assets_prefix: 'https://assets.paper.bible/',
fonts_prefix: 'https://assets.paper.bible/fonts',
})
而要使用self-host,请在origin上的任何前缀下提供相同的布局:
-
WASM -使用Vite,直接从安装的包中导入url(没有托管) 需要):
import wasm_url from '@myriaddreamin/typst-ts-web-compiler/pkg/typst_ts_web_compiler_bg.wasm?url'(同样 对于渲染器)。没有捆绑器,从node_modules到你的public/dir。 -
<assets_prefix>/frames/- - - - - -painted.png和torn.png从回购文件中抄来的assets/frames/. (backgrounds/仅当您的UI提供建议时才需要 背景图片-见下文。) -
<fonts_prefix>/-字体树(manifest.json每户一人,不得有退路 下_noto/). 使用repo的字体配置生成它:curl -O https://raw.githubusercontent.com/gracious-tech/bookcover/main/font_config.json npx typst-fonts-download --fonts public/fonts --config font_config.json
内置的背景
内置背景文件的文件名(例如: beach.jpg)是它的ID——嵌入协议发送一个内置的
作为 bg_image_builtin 没有字节。将其连接到其中任何一个以获取副本:
https://assets.paper.bible/backgrounds/<name>-最终版本的原版(平均2.8MB) 输出https://assets.paper.bible/backgrounds/previews_2700/<name>(BG_PREVIEW_DIR) - ~ 380kb, 足以在屏幕上预览一个6x9”的封面https://assets.paper.bible/backgrounds/previews_800/<name>-大缩略图https://assets.paper.bible/backgrounds/thumbnails/<name>- 160x120拾荒砖
将文件名传递给 generate() 作为 image_builtin 无论你渲染哪个副本,都是自动的
文本颜色来自其烘烤的颜色数据,预览与最终输出完全匹配。
get_builtin_bg_regions(name) 返回相同的数据,和 get_builtin_bg(name) 添加了
原始像素大小(用于分辨率检查而无需下载)。
CoverGenerator.generate(options): Promise<GenerateResult>
interface GenerateOptions {
schema: unknown // raw schema (see above)
image?: Blob // background image
// Filename of the built-in background `image` is a copy of — colors come from its baked data
image_builtin?: string
// Shrink `image` to at most this many pixels per inch of cover before compiling (previews)
image_max_dpi?: number
format?: 'pdf'|'svg'|'png' // default: 'pdf'
ppi?: number // PNG resolution, default: 144
split?: boolean // include split panels in result
pdf_pages?: boolean // PDF: front and back pages (no spine), bleed all round
custom_fonts?: Uint8Array[] // raw TTF bytes for custom fonts
}
interface GenerateResult {
data: Uint8Array | string // full cover (bytes for PDF/PNG, string for SVG)
split?: SplitResult<Uint8Array> | SplitResult<string>
}
CoverGenerator.destroy()
撤销blob url以释放内存。当不再需要实例时调用。
例子
import {init} from 'bookcover-web'
const generator = await init({
wasm_url: 'https://assets.paper.bible/typst/0.7.0/typst_ts_web_compiler_bg.wasm',
renderer_wasm_url: 'https://assets.paper.bible/typst/0.7.0/typst_ts_renderer_bg.wasm',
assets_prefix: 'https://assets.paper.bible/',
fonts_prefix: 'https://assets.paper.bible/fonts',
})
const result = await generator.generate({
schema: {title1: 'My Book', author: 'Jane Doe', /* ... */},
format: 'svg',
split: true,
})
// result.data is the full SVG string
// result.split.front / .back / .spine are individual panel SVGs