Advanced Image Processing in the Browser

A lightweight JavaScript library for applying filters, transformations, and watermarks to images with minimal code.

Try the Playground Read Documentation
Example processed image
Processed with ImageProcessor.js

Powerful Features

ImageProcessor makes it easy to apply complex image processing operations with just a few lines of code.

Powerful Filters

Apply filters like grayscale, sepia, invert, brightness, contrast, blur, saturation, hue rotation, and opacity.

Image Transformations

Perform transformations such as rotation, cropping, and resizing with minimal code.

Watermarking

Add text or image watermarks with customizable positions, repeats, and angles.

Event Hooks

Use event hooks for processing start, completion, and errors for seamless integration.

Batch Processing

Process multiple images at once with the same or different settings.

Customizable HTML

Wrap processed images in customizable HTML elements with specified class lists.

Interactive Playground

Try out ImageProcessor's features with this interactive playground. Adjust the settings to see the changes in real-time.

0°
0°

Documentation

Learn how to integrate and use ImageProcessor in your projects.

Getting Started

Installation

Include the ImageProcessor.js script in your HTML file: 

<script src="path/to/ImageProcessor.js"></script>

Basic Usage

To apply basic filters and transformations:

// Create a new ImageProcessor instance
new ImageProcessor('https://example.com/image.jpg', {
    width: 400,
    height: 300,
    grayscale: 'grayscale(100%)',
    brightness: 'brightness(3)',
    altText: 'Processed image',
    targetElement: document.getElementById('image-target'),
});

Advanced Usage

Watermarking

Add text or image watermarks to your images:

// Add a text watermark
new ImageProcessor('https://example.com/image.jpg', {
    watermark: 'Confidential',
    watermarkPosition: 'center',
    watermarkStyle: {
        fontSize: '20px',
        fontFamily: 'Arial',
        color: 'rgba(255, 255, 255, 0.5)',
    },
    targetElement: document.getElementById('image-target'),
});

Event Hooks

Use event hooks for processing start, completion, and errors: 

new ImageProcessor('https://example.com/image.jpg', {
    grayscale: 'grayscale(50%)',
    onProcessingStart: () => {
        console.log('Image processing started');
        // Show loading indicator
    },
    onProcessed: (img) => {
        console.log('Image processing completed', img);
        // Hide loading indicator
    },
    onError: (error) => {
        console.error('Error processing image:', error);
        // Show error message
    },
    targetElement: document.getElementById('image-target'),
});

API Reference

Option Type Description
width number Width of the processed image
height number Height of the processed image
cropX, cropY, cropWidth, cropHeight number Crop dimensions
grayscale, sepia, invert string CSS filter values (e.g., 'grayscale(100%)')
brightness, contrast, blur string CSS filter values for adjustments
rotate number Rotation angle in degrees
watermark string Text or image URL for watermark
watermarkPosition string Position: 'center', 'top-left', 'top-right', etc.
watermarkStyle object Styling for text watermarks (fontSize, color, etc.)