时间轴:
在浏览器中对JPEG XL图像进行编码和解码的简单体验. 由WebAssembly提供电力.
QQ 只有一个稳定的浏览器支持显示 JPEG XL 到目前为止. 该包件用于试验和试验.
使用 缩写 图书馆.
安装
npm install --save @jsquash/jxl
# Or your favourite package manager alternative
使用量
注意 : 您需要手动将代码目录中的被点文件包含在内, 或者使用 WebPack 或 Rollup 这样的捆绑器将它们包含在您的应用程序/ 服务器中 .
解码( 数据: ArrayBuffer): 承诺
将 JPEG XL 二进制阵列缓冲解码为原始 RGB 图像数据 .
数据
类型 : ArrayBuffer
示例
import { decode } from '@jsquash/jxl';
const formEl = document.querySelector('form');
const formData = new FormData(formEl);
// Assuming user selected an input JPEG XL file
const imageData = await decode(await formData.get('image').arrayBuffer());
编码( 数据: 图像数据, 选项? : 编码选项): 承诺
将原始 RGB 图像数据编码为 JPEG 格式并解析为二进制数据的 ArrayBuffer .
数据
类型 : ImageData
选项
类型 : Partial<EncodeOptions>
JPEG XL 输出图像的编码器选项. 参见默认值。 。 。 .
示例
import { encode } from '@jsquash/jxl';
async function loadImage(src) {
const img = document.createElement('img');
img.src = src;
await new Promise(resolve => img.onload = resolve);
const canvas = document.createElement('canvas');
[canvas.width, canvas.height] = [img.width, img.height];
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
return ctx.getImageData(0, 0, img.width, img.height);
}
const rawImageData = await loadImage('/example.png');
const jpegBuffer = await encode(rawImageData);
无损失示例
import { encode } from '@jsquash/jxl';
const rawImageData = await loadImage('/example.png');
// Lossless encoding can be achieved by setting the `lossless` option to `true`
const jxlBuffer = await encode(rawImageData, { lossless: true });
激活多线索
默认情况下,编码功能将使用单一线程来编码图像. 如果您想要加快速度, 您可以启用以下的多条读取 .
- 移动您的电话
encode改为 a 网络工人。 。 。 . - 配置您的网络服务器以使用以下信头( 这是 a 安保要求(中文(简体) )
Cross-Origin-Opener-Policy: same-originCross-Origin-Embedder-Policy: require-corp
这仍然只在支持多行读的浏览器和设备中生效. 如果浏览器不支持它,它会倒回单线程模式
手工 WASM 初始化( 不推荐)
在大多数情况下,不需要手动将所提供的WebAssembly模块关闭. 生成的胶体代码会照顾到这一点,并支持大多数的网络捆绑器.
出现这种情况的一个情况是,在Cloudflare工人中使用模块(更多信息请参见 README) (中文(简体) ).
这个 encode 财务报告和审定财务报表 decode 模块两个导出 an init 函数,用于手动加载原模块.
import decode, { init as initJXLDecode } from '@jsquash/jxl/decode';
initJXLDecode(WASM_MODULE); // The `WASM_MODULE` variable will need to be sourced by yourself and passed as an ArrayBuffer.
const image = await fetch('./image.jpeg').then(res => res.arrayBuffer()).then(decode);
您也可以通过自定义选项到 init 函数可以自定义模块的行为。 见 标记文件 更多信息.
import decode, { init as initJXLDecode } from '@jsquash/jxl/decode';
initJXLDecode(null, {
// Customise the path to load the wasm file
locateFile: (path, prefix) => `https://example.com/${prefix}/${path}`,
});
const image = await fetch('./image.jxl').then(res => res.arrayBuffer()).then(decode);