翻译:
在浏览器中优化PNG图像的简单体验. 由Web Assembly QQ和Rust提供动力.
用可爱的 奥克西平 用于 png 优化.
安装
npm install --save @jsquash/oxipng
# Or your favourite package manager alternative
使用量
注意 : 您需要手动将代码目录中的被点文件包含在内, 或者使用 WebPack 或 Rollup 这样的捆绑器将它们包含在您的应用程序/ 服务器中 .
优化( 数据: ArrayBuffer, 选项? : 优化选项): 承诺
优化 PNG 图像缓冲器或原始图像数据,并解析优化的 PNG 图像缓冲器输出
数据
类型 : ArrayBuffer | ImageData
选项
类型 : Partial<OptimiseOptions>
Oxipng 优化输出图像选项 . 参见默认值。 。 。 .
interlace(boolean) 是否使用 PNG 插座 。 相接会增加优化图像的大小.level(数字)是1到6之间的优化水平. 关卡越高,压缩越多. 任何4级以上都不推荐.optimiseAlpha(boolean)是否允许修改透明的像素来改进压缩.
示例
import { optimise } from '@jsquash/oxipng';
const formEl = document.querySelector('form');
const formData = new FormData(formEl);
// Assuming user selected an input png file
const pngImageBuffer = await formData.get('image').arrayBuffer();
const optimisedPngBuffer = await optimise(pngImageBuffer, { level: 3 });
激活多线索
默认情况下,优化函数将使用一线程来优化图像. 如果您想要加快速度, 您可以启用以下的多条读取 .
- 移动您的电话
optimise改为 a 网络工人。 。 。 . - 配置您的网络服务器以使用以下信头( 这是 a 安保要求(中文(简体) )
Cross-Origin-Opener-Policy: same-originCross-Origin-Embedder-Policy: require-corp
这仍然只在支持多行读的浏览器中生效. 如果浏览器不支持它,它会倒回单线程模式
手工 WASM 初始化( 不推荐)
在大多数情况下,不需要手动将所提供的WebAssembly模块关闭. 生成的胶体代码会照顾到这一点,并支持大多数的网络捆绑器.
出现这种情况的一个情况是,在Cloudflare工人中使用模块(更多信息请参见 README) (中文(简体) ).
这个 optimise 模块导出 a init 函数,用于手动加载原模块.
import optimise, { init } from '@jsquash/oxipng/optimise';
init(WASM_MODULE); // The `WASM_MODULE` variable will need to be sourced by yourself and passed as an ArrayBuffer.
const image = await fetch('./image.png').then(res => res.arrayBuffer()).then(optimise);