ImageProcessor Library

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

Features

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.

Getting Started

Installation

Include the ImageProcessor.js script in your HTML file:

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

Usage

Basic Usage

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

Advanced Usage with Watermark

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

More Examples can be found on CodePen

ImageProcessor.js on CodePen

Options

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.

Events

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

CODING GUIDE

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

FAQs

See FAQ.md for more information.

Contributing

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

License

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

Author

Peter Benoit

License

peterbenoit/ImageProcessor

ErrorLooks like something went wrong!

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages