翻译:
浏览器中用于编码和解码PNG图像的简单体验. 由WebAssembly提供电力.
使用 生锈 PNG 箱子。 。 。 .
安装
npm install --save @jsquash/png
# Or your favourite package manager alternative
使用量
注意 : 您需要手动将代码目录中的被点文件包含在内, 或者使用 WebPack 或 Rollup 这样的捆绑器将它们包含在您的应用程序/ 服务器中 .
解码(data: ArrayBuffer, options? ): {位深度? : 8\ 16} : 保证<图像数据> {图像数据DataRGBA16>
将 PNG 二进制阵列缓冲解码为原始图像数据 .
默认情况下,它会解码为8位的RGBA图像数据.
若为 options.bitDepth 设置为 16,它解码为 16-位 RGBA 图像数据.
数据
类型 : ArrayBuffer
选项(可选)
类型 : object
bitDepth(可选) :8 | 16- 输出想要的比特深度。 默认为8。 。 。 .
示例
import { decode } from '@jsquash/png';
const formEl = document.querySelector('form');
const formData = new FormData(formEl);
// Decode to 8-bit RGBA
const imageData8bit = await decode(await formData.get('image').arrayBuffer());
// Decode to 16-bit RGBA
const imageData16bit = await decode(await formData.get('image').arrayBuffer(), { bitDepth: 16 });
encode(数据:ImageData QQ ImageDataRGBA16), 选项: {位深度? : 8\ 16}: 保证
你也许想使用 翻译: 软件包。 它既能从原始图像数据直接优化并编码到PNG(只有8位图像).
将原始的 RGB 图像数据编码为 PNG 格式并解析为二进制数据的 ArrayBuffer .
可选择指定输出 PNG 的位深 。 默认为8位.
数据
类型 : ImageData 或用于 16 位图像 { data: Uint16Array; width: number; height: number; }
示例
import { encode } from '@jsquash/png';
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.jpg');
const pngBuffer = await encode(rawImageData);
有 16 位图像数据的示例
import { encode } from '@jsquash/png';
async function create16bitImage(src) {
const pixels = new Uint16Array(4 * 256 * 256);
for (let i = 0; i < pixels.length; i += 4) {
pixels[i] = Math.floor(Math.random() * 65535); // R
pixels[i + 1] = Math.floor(Math.random() * 65535); // G
pixels[i + 2] = Math.floor(Math.random() * 65535); // B
pixels[i + 3] = 65535; // A
}
return {
data: pixels,
width: 256,
height: 256,
};
}
const rawImageData = await create16bitImage();
const png16bitBuffer = await encode(rawImageData, { bitDepth: 16 });
手工 WASM 初始化( 不推荐)
在大多数情况下,不需要手动将所提供的WebAssembly模块关闭. 生成的胶体代码会照顾到这一点,并支持大多数的网络捆绑器.
出现这种情况的一个情况是,在Cloudflare工人中使用模块(更多信息请参见 README) (中文(简体) ).
这个 encode 财务报告和审定财务报表 decode 模块两个导出 an init 函数,用于手动加载原模块.
import decode, { init as initPngDecode } from '@jsquash/png/decode';
initPngDecode(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(decode);