Visual Image Tool — focal point & crop zone picker for the web

Drag the marker. Resize the box. Watch the numbers.

This is the actual library running on this page, loaded from a CDN with no build step. It starts by demonstrating itself — then it's yours.

A landscape photograph used to demonstrate the focal point and crop zone tools

Controls

Current data

No data available

Actions

What you get back, and where it goes

Coordinates come back in the image's original pixels, so they stay valid at any display size.

What you get	Where it tends to go
`focusPoint: {x, y}`	CSS `object-position`, imgix `fp-x`/`fp-y`, Cloudinary gravity
`cropZone: {x, y, w, h}`	a server-side crop with sharp or ImageMagick, or a stored crop rectangle

Is this the right tool?

Yes, if

you need a person to mark where the subject of an image is, and you want those positions back as numbers — to store on a record, or hand to an image pipeline.

No, if

you need the browser to actually produce the cropped image — rotation, zoom, canvas export, file output. This library never touches pixels. A full cropper such as Cropper.js is built for that job.

Install

npm install @h4md1/visual-image-tool

Or skip the install entirely and load it from a CDN — this is what the demo above does. Pin the exact version in production.

<script src="https://cdn.jsdelivr.net/npm/@h4md1/visual-image-tool@0.3.0/dist/visual-image-tool.umd.js"></script>

There is a runnable JSFiddle if you would rather poke at it first.

Quick start

import { VisualImageTool } from "@h4md1/visual-image-tool";

const tool = new VisualImageTool({
  imageElement: document.getElementById("myImage"),
  onChange: (data) => {
    console.log(data.focusPoint); // { x, y }   in original pixels
    console.log(data.cropZone);   // { x, y, width, height }
  },
});

tool.toggleFocusPoint(true);
tool.toggleCropZone(true);

Loading the UMD build from a script tag? The global holds the named export, so the class is VisualImageTool.VisualImageTool. With an import or require you already have the class itself.

It's plain DOM, so it drops into anything

The whole API

`toggleFocusPoint(active?)`	Show or hide the focus point marker.
`toggleCropZone(active?)`	Show or hide the crop zone.
`setFocusPoint(x, y)`	Place the marker, in original pixels.
`setCropZone(x, y, w, h)`	Place and size the crop zone.
`getFocusPoint()` / `getCropZone()`	Read the current values.
`getImageDimensions()`	The image's natural size.

Setters return the instance, so they chain. Full options and types are in the README.

Browser support

Current versions of Chrome, Firefox, Safari and Edge.