Library Canvas API No dependencies

ImageProcessor.js

A small JavaScript library for creating real processed image output in the browser. Apply filters, crop, resize, rotate, watermark, and export without sending the original file to a server.

Open demo GitHub

01 · Why it exists

CSS filters change appearance. Canvas changes the file.

CSS filters are useful for display, but they do not produce a modified image. If the workflow needs a cropped, resized, watermarked, or blurred file that can be downloaded or reused, the image has to be processed through Canvas.

ImageProcessor.js wraps that work in a smaller API. It is aimed at front-end tools, CMS utilities, admin screens, and privacy-sensitive workflows where image processing should stay on the device.

Core behavior

A focused wrapper around browser primitives.

Filters that export

Apply grayscale, blur, contrast, brightness, saturation, sepia, opacity, and related filter settings to the actual canvas output.

Crop, resize, rotate

Transform image dimensions and orientation before export. Useful for thumbnails, previews, uploads, and generated assets.

Watermarks and batches

Add text watermarks, process arrays of images, or use data attributes when a markup-first workflow is easier to maintain.

02 · API shape

Use it directly or let markup describe the work.

new ImageProcessor('photo.jpg', {
  grayscale: true,
  width: 600,
  rotate: 90,
  watermark: 'Example',
  onComplete: (canvas) => {
    document.body.append(canvas);
  }
});
<div
  data-img="photo.jpg"
  data-grayscale="true"
  data-watermark="Example"
  data-width="600"></div>

<script>new ImageProcessor();</script>

03 · Implementation

Small enough to understand, useful enough to keep around.

Area How it works
Input Accepts a single image URL, multiple images, or elements marked with data-img.
Processing Draws the image into a canvas, applies transforms and filters, then returns the processed canvas.
Output Supports callbacks for rendering, download, upload handoff, or follow-on processing.
Privacy No server is required for local or browser-accessible images. Work happens in the user agent.

Keep exploring

Related paths.