Security News
pnpm 10.0.0 Blocks Lifecycle Scripts by Default
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
@jsquash/webp
Advanced tools
Wasm webp encoder and decoder supporting the browser. Repackaged from Squoosh App.
An easy experience for encoding and decoding WebP images in the browser. Powered by WebAssembly ⚡️.
Uses the libwebp library.
A jSquash package. Codecs and supporting code derived from the Squoosh app.
npm install --save @jsquash/webp
# Or your favourite package manager alternative
Note: You will need to either manually include the wasm files from the codec directory or use a bundler like WebPack or Rollup to include them in your app/server.
Decodes WebP binary ArrayBuffer to raw RGB image data.
Type: ArrayBuffer
import { decode } from '@jsquash/webp';
const formEl = document.querySelector('form');
const formData = new FormData(formEl);
// Assuming user selected an input WebP file
const imageData = await decode(await formData.get('image').arrayBuffer());
Encodes raw RGB image data to WebP format and resolves to an ArrayBuffer of binary data.
Type: ImageData
Type: Partial<EncodeOptions>
The WebP encoder options for the output image. See default values.
import { encode } from '@jsquash/webp';
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 webpBuffer = await encode(rawImageData);
In most situations there is no need to manually initialise the provided WebAssembly modules. The generated glue code takes care of this and supports most web bundlers.
One situation where this arises is when using the modules in Cloudflare Workers (See the README for more info).
The encode
and decode
modules both export an init
function that can be used to manually load the wasm module.
import decode, { init as initWebpDecode } from '@jsquash/webp/decode';
initWebpDecode(WASM_MODULE); // The `WASM_MODULE` variable will need to be sourced by yourself and passed as an ArrayBuffer.
const image = await fetch('./image.webp').then(res => res.arrayBuffer()).then(decode);
You can also pass custom options to the init
function to customise the behaviour of the module. See the Emscripten documentation for more information.
import decode, { init as initWebpDecode } from '@jsquash/webp/decode';
initWebpDecode(null, {
// Customise the path to load the wasm file
locateFile: (path, prefix) => `https://example.com/${prefix}/${path}`,
});
const image = await fetch('./image.webp').then(res => res.arrayBuffer()).then(decode);
FAQs
Wasm webp encoder and decoder supporting the browser. Repackaged from Squoosh App.
We found that @jsquash/webp demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.