翻译:
在浏览器中对JPEG图像进行编码和解码的简单体验. 由WebAssembly提供电力.
使用 莫兹杰普格 图书馆.
安装
npm install --save @jsquash/jpeg
# Or your favourite package manager alternative
使用量
注意 : 您需要手动将代码目录中的被点文件包含在内, 或者使用 WebPack 或 Rollup 这样的捆绑器将它们包含在您的应用程序/ 服务器中 .
解码( 数据: ArrayBuffer, 选项? : 解码选项): 承诺
解码 JPEG 二进制矩阵缓冲器到原始的 RGB 图像数据 .
数据
类型 : ArrayBuffer
选项
类型 : Partial<DecodeOptions>
解码器的自定义选项 。 设置 preserveOrientation 改为 true 将在元数据标签的基础上将图像旋转到正确的方向。 默认设置为 false。 。 。 .
示例
import { decode } from '@jsquash/jpeg';
const formEl = document.querySelector('form');
const formData = new FormData(formEl);
// Assuming user selected an input jpeg file
const imageData = await decode(await formData.get('image').arrayBuffer());
编码( 数据: 图像数据, 选项? : 编码选项): 承诺
将原始 RGB 图像数据编码为 JPEG 格式并解析为二进制数据的 ArrayBuffer .
数据
类型 : ImageData
选项
类型 : Partial<EncodeOptions>
MozJPEG 输出图像的编码器选项. 参见默认值。 。 。 .
示例
import { encode } from '@jsquash/jpeg';
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);
手工 WASM 初始化( 不推荐)
在大多数情况下,不需要手动将所提供的WebAssembly模块关闭. 生成的胶体代码会照顾到这一点,并支持大多数的网络捆绑器.
出现这种情况的一个情况是,在Cloudflare工人中使用模块(更多信息请参见 README) (中文(简体) ).
这个 encode 财务报告和审定财务报表 decode 模块两个导出 an init 函数,用于手动加载原模块.
import decode, { init as initJpegDecode } from '@jsquash/jpeg/decode';
initJpegDecode(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 initJpegDecode } from '@jsquash/jpeg/decode';
initJpegDecode(null, {
// Customise the path to load the wasm file
locateFile: (path, prefix) => `https://example.com/${prefix}/${path}`,
});
const image = await fetch('./image.jpeg').then(res => res.arrayBuffer()).then(decode);