Compress JPEG

npm npm License

A high-performance WASM module that simulates JPEG compression artifacts on raw image data, designed to be used easily in JavaScript or TypeScript environments via an npm package.

📋 Table of Contents

Features
Installation
Usage
License
Contact

✨ Features

Fast and portable through WebAssembly.
Supports customizable compression quality.
Accepts and returns raw RGBA pixel data.
Pure Rust core with zero dependencies beyond wasm-bindgen.

🔧 Installation

Install the package via npm:

npm install compress-jpeg

🚀 Usage

Here's an example of how to integrate compress-jpeg with plain TypeScript in the browser. This snippet shows:

Loading an image file via an HTML <input>.
Drawing it to an off-screen canvas and extracting pixel data.
Passing the data to the WASM function.
Rendering the compressed output back onto a visible canvas.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>WASM JPEG Simulator Demo</title>
    </head>
    <body>
        <!-- File input and canvases -->
        <input id="fileInput" type="file" accept="image/*" />
        <canvas id="originalCanvas" style="display:none;"></canvas>
        <canvas id="processedCanvas"></canvas>

        <script type="module" src="main.ts"></script>
    </body>
</html>

// main.ts
import init, { ImageData as RustImageData, compress_jpeg } from "compress-jpeg";

const fileInput = document.getElementById("fileInput") as HTMLInputElement;
const originalCanvas = document.getElementById("originalCanvas") as HTMLCanvasElement;
const processedCanvas = document.getElementById("processedCanvas") as HTMLCanvasElement;

fileInput.addEventListener("change", async () => {
    const file = fileInput.files?.[0];
    if (!file) return;

    // Initialize the WASM module
    await init();

    // Load image into an off-screen canvas
    const img = new Image();
    const reader = new FileReader();
    reader.onload = () => {
        img.src = reader.result as string;
    };
    reader.readAsDataURL(file);

    img.onload = () => {
        originalCanvas.width = img.width;
        originalCanvas.height = img.height;
        const ctx = originalCanvas.getContext("2d")!;
        ctx.drawImage(img, 0, 0);

        // Extract raw pixel data
        const browserImageData = ctx.getImageData(0, 0, img.width, img.height);
        const input = new RustImageData(
            new Uint8ClampedArray(browserImageData.data),
            browserImageData.width,
            browserImageData.height
        );

        // Simulate JPEG compression at quality=30
        const output = compress_jpeg(input, 30);

        // Convert back to browser ImageData
        const processedData = new ImageData(new Uint8ClampedArray(output.data()), output.width(), output.height());

        // Draw on visible canvas
        processedCanvas.width = output.width();
        processedCanvas.height = output.height();
        processedCanvas.getContext("2d")!.putImageData(processedData, 0, 0);

        // Free the WebAssembly memory
        output.free();
    };
});

📜 License

This project is licensed under the MIT License. See the LICENSE file for details.

📧 Contact

For inquiries or more information, you can reach out to us at ganemedelabs@gmail.com.

Détail du package

compress-jpeg

readme