A lightweight JavaScript library for advanced image processing in the browser. Supports a variety of filters, transformations, and watermarks.

• Apply filters like grayscale, sepia, invert, brightness, contrast, blur, saturation, hue rotation, and opacity.
• Perform transformations such as rotation, cropping, and resizing.
• Add text or image watermarks with customizable positions, repeats, and angles.
• Lazy loading, crossorigin, decoding, and referrer policy support.
• Event hooks for processing start, completion, and errors.
• Supports multiple images and batch processing.
• Wrap processed images in customizable HTML elements (e.g., div, section) with specified class lists.

Load ImageProcessor.js directly from jsDelivr — no build step or download required:

<!-- Latest version (tracks the main branch) -->
<script src="https://cdn.jsdelivr.net/gh/peterbenoit/ImageProcessor@main/ImageProcessor.js"></script>

<!-- Pinned to a specific release -->
<script src="https://cdn.jsdelivr.net/gh/peterbenoit/ImageProcessor@v1.0.1/ImageProcessor.js"></script>

Download ImageProcessor.js and include it in your HTML file:

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

To apply basic filters and transformations:

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'),
});

To add a watermark to an image:

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'),
});

ImageProcessor.js on CodePen

• width: Width of the processed image.
• height: Height of the processed image.
• cropX, cropY, cropWidth, cropHeight: Crop dimensions.
• grayscale, sepia, invert: Image filters.
• brightness, contrast, blur, saturation, hueRotate, opacity: More image filters.
• rotate: Rotate the image by a certain degree.
• watermark: Text or image URL for the watermark.
• watermarkPosition: Position of the watermark.
• watermarkRepeat: How the watermark is repeated.
• watermarkAngle: Angle of watermark text.
• altText: Alternative text for accessibility.
• loading, crossorigin, decoding, referrerPolicy: Image loading attributes.
• wrapperTag: HTML tag used to wrap the processed image (e.g., div, p).
• wrapperClassList: Class list for the wrapping HTML tag.

• onProcessingStart: Triggered when image processing starts.
• onProcessed: Triggered when image processing is complete.
• onError: Triggered on errors.

The CODING_GUIDE.md provides comprehensive information on the implementation, and configuration.

See FAQ.md for more information.

Contributions are more than welcome! Please check the issues page for open tasks.

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

Created by Peter Benoit