@100jm/image-resizer

A TypeScript library for resizing images in both browser and Node.js environments with automatic environment detection.

Features

🖼️ Cross-platform: Works in both browser and Node.js environments
🔄 Auto-detection: Automatically detects environment and uses appropriate method
📦 TypeScript: Full TypeScript support with type definitions
⚡ Promise-based: Modern async/await API
🔧 Configurable: Quality, format, and smoothing options
📏 Aspect ratio preservation: Maintains image proportions
🚀 Lightweight: No heavy dependencies

Installation

npm install @100jm/image-resizer

Usage

Basic Usage

import { resizer } from '@100jm/image-resizer';

// Resize an image file
const result = await resizer(imageFile, 800, 600, {
  quality: 0.8,
  format: 'jpeg'
});

console.log(`Resized from ${result.originalWidth}x${result.originalHeight} to ${result.width}x${result.height}`);

Browser Environment

import { resizer } from '@100jm/image-resizer';

// Handle file input
const fileInput = document.getElementById('fileInput') as HTMLInputElement;
const file = fileInput.files[0];

if (file) {
  try {
    const result = await resizer(file, 1024, 768, {
      quality: 0.9,
      format: 'jpeg',
      imageSmoothingQuality: 'high'
    });
    
    // Use the resized image blob
    const img = document.createElement('img');
    img.src = URL.createObjectURL(result.data);
    document.body.appendChild(img);
    
    console.log('Resized successfully:', result);
  } catch (error) {
    console.error('Image resize failed:', error);
  }
}

Node.js Environment

import { resizer } from '@100jm/image-resizer';
import { readFileSync, writeFileSync } from 'fs';

// Read image file
const imageBuffer = readFileSync('./input.jpg');

// Resize image
const result = await resizer(imageBuffer, 800, 600, {
  quality: 0.8
});

// Save resized image
writeFileSync('./output.jpg', result.data);
console.log('Resized successfully:', result);

API Reference

`resizer(file, maxWidth, maxHeight, options?)`

Resizes an image file or buffer while maintaining aspect ratio.

Parameters

file (File | Buffer): The image to resize
maxWidth (number): Maximum width in pixels
maxHeight (number): Maximum height in pixels
options (object, optional): Configuration options

Options

interface ResizeOptions {
  quality?: number;                    // Image quality (0.1 - 1.0, default: 0.7)
  format?: 'jpeg' | 'png' | 'webp';    // Output format (browser only, default: 'jpeg')
  imageSmoothingEnabled?: boolean;     // Enable image smoothing (default: true)
  imageSmoothingQuality?: 'low' | 'medium' | 'high'; // Smoothing quality (browser only, default: 'high')
}

Returns

Browser Environment:

{
  data: Blob;           // Resized image as Blob
  width: number;        // Final width
  height: number;       // Final height
  originalWidth: number; // Original width
  originalHeight: number; // Original height
}

Node.js Environment:

{
  data: Blob;       // Resized image as Blob
  width: number;        // Final width
  height: number;       // Final height
  originalWidth: number; // Original width
  originalHeight: number; // Original height
}

Examples

Maintain Aspect Ratio

// Only specify max dimensions, aspect ratio is preserved
const result = await resizer(imageFile, 800, 600);
console.log(`Resized to ${result.width}x${result.height}`);

High Quality Output

const result = await resizer(imageFile, 800, 600, {
  quality: 0.95,
  imageSmoothingQuality: 'high'
});

Different Formats (Browser)

// PNG format
const pngResult = await resizer(imageFile, 800, 600, {
  format: 'png',
  quality: 0.9
});

// WebP format
const webpResult = await resizer(imageFile, 800, 600, {
  format: 'webp',
  quality: 0.8
});

Node.js with Buffer

import { resizer } from '@100jm/image-resizer';

const imageBuffer = Buffer.from('...'); // Your image buffer
const result = await resizer(imageBuffer, 800, 600, {
  quality: 0.8
});

Environment Detection

The library automatically detects the environment:

Browser: Uses Canvas API with document.createElement('canvas')
Node.js: Uses canvas package with createCanvas()

No manual configuration required!

Browser Support

Chrome 51+
Firefox 42+
Safari 10+
Edge 79+

Node.js Support

Node.js 14.0.0+
Requires canvas package for image processing

Development

# Install dependencies
npm install @100jm/image-resizer

# Build the library (CommonJS + ES Modules)
npm run build

# Run tests
npm test

# Development mode with watch
npm run dev

# Clean build directory
npm run clean

TypeScript Target: ES6
Module Systems: CommonJS + ES Modules (dual build)
Build Output:
- dist/cjs/ - CommonJS modules for Node.js
- dist/mjs/ - ES Modules for modern bundlers

The library uses conditional exports to provide the optimal module format:

CommonJS environments: Uses dist/cjs/ files
ES Modules environments: Uses dist/mjs/ files

License

MIT

Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Issues

If you find any issues, please report them on the GitHub issues page.