🦀 Qrush Compressor

Fast file and image compression library powered by WebAssembly (Rust).

Installation

npm install qrush-compressor

Quick Start

Initialize WASM

import initCompressor from 'qrush-compressor';
await initCompressor();  // Required before using any function

Compress Data

import { compress, WasmCompressionMethod, WasmCompressionLevel } from 'qrush-compressor';

const data = new Uint8Array([...]);
const result = compress(data, WasmCompressionMethod.Gzip, WasmCompressionLevel.Best);

console.log(`Original: ${result.original_size()} bytes`);
console.log(`Compressed: ${result.compressed_size()} bytes`);
console.log(`Ratio: ${(result.compression_ratio() * 100).toFixed(2)}%`);

Compress Image

import { compress_image_jpeg } from 'qrush-compressor';

const imageData = new Uint8Array([...]); // Your image file
const result = compress_image_jpeg(imageData, 85); // Quality 1-100
const jpegBytes = result.data();

Resize & Compress Image

import { compress_and_resize_image } from 'qrush-compressor';

const result = compress_and_resize_image(
  imageData,
  1920,  // max width (null for auto)
  null,  // max height (null for auto)
  85     // quality
);

Framework Examples

React

import { useEffect, useState } from 'react';
import initCompressor, { compress_image_jpeg } from 'qrush-compressor';

function App() {
  const [ready, setReady] = useState(false);

  useEffect(() => {
    initCompressor().then(() => setReady(true));
  }, []);

  const handleFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!ready || !e.target.files) return;
    const file = e.target.files[0];
    const data = new Uint8Array(await file.arrayBuffer());
    const result = compress_image_jpeg(data, 85);
    console.log(`Saved ${((1 - result.compression_ratio()) * 100).toFixed(2)}%`);
  };

  return <input type="file" onChange={handleFile} accept="image/*" />;
}

Angular

import { Component, OnInit } from '@angular/core';
import initCompressor, { compress, WasmCompressionMethod } from 'qrush-compressor';

@Component({
  selector: 'app-root',
  template: '<input type="file" (change)="onFile($event)">'
})
export class AppComponent implements OnInit {
  async ngOnInit() {
    await initCompressor();
  }

  async onFile(event: any) {
    const file = event.target.files[0];
    const data = new Uint8Array(await file.arrayBuffer());
    const result = compress(data, WasmCompressionMethod.Brotli);
    console.log(`Compressed to ${result.compressed_size()} bytes`);
  }
}

Vue 3

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import initCompressor, { compress_image_jpeg } from 'qrush-compressor';

onMounted(async () => {
  await initCompressor();
});

async function handleFile(e: Event) {
  const file = (e.target as HTMLInputElement).files?.[0];
  if (!file) return;
  const data = new Uint8Array(await file.arrayBuffer());
  const result = compress_image_jpeg(data, 80);
  console.log(`Compressed: ${result.compressed_size()} bytes`);
}
</script>

<template>
  <input type="file" @change="handleFile" accept="image/*">
</template>

API Reference

Compression Methods

• WasmCompressionMethod.Gzip - Standard GZIP
• WasmCompressionMethod.Zlib - ZLIB format
• WasmCompressionMethod.Brotli - Best compression

Compression Levels

• WasmCompressionLevel.Fast - Fastest
• WasmCompressionLevel.Default - Balanced
• WasmCompressionLevel.Best - Maximum compression

Functions

compress(data, method, level)

Compress binary data.

decompress(data, method)

Decompress previously compressed data.

compress_image_jpeg(data, quality)

Compress image to JPEG format.

compress_and_resize_image(data, maxWidth, maxHeight, quality)

Resize and compress image in one step.

Performance

| Method | Compression | Speed | |--------|-------------|-------| | Brotli | Best (~20%) | Slow | | ZLIB | Good (~25%) | Fast | | GZIP | Good (~26%) | Fast |

Browser Support

All modern browsers (Chrome, Firefox, Safari, Edge).

License

MIT