Interactive demo
-
+ Skip to the demo
+
+ 
+ Visual Image Tool
Controls
- - -Current data
-Actions
- - + ++ Let someone say where the subject is. Get back numbers. +
+ ++ A zero-dependency vanilla JS tool to pick focal points and crop zones + on images. It hands you pixel coordinates you can feed straight into + your image pipeline — it never touches the pixels itself. +
+ +-
+
- 3.6 kB gzipped +
- Zero dependencies +
- TypeScript declarations included +
- MIT +
- You can use VisualImageTool directly in your HTML pages without - installing any dependency, thanks to the CDN - jsdelivr: -
-<!-- UMD via CDN -->
-<script src="https://cdn.jsdelivr.net/npm/@h4md1/visual-image-tool/dist/visual-image-tool.umd.js"></script>
-
-<!-- OR ESM via CDN -->
-<script type="module">
- import { VisualImageTool } from 'https://cdn.jsdelivr.net/npm/@h4md1/visual-image-tool/dist/visual-image-tool.esm.js';
- // Your code here
-</script>-
-
- - Focus point: Set a point of interest on the image - with a visual marker - -
- - Crop zone: Define a crop zone with resize handles - -
- - No dependencies: Works without external libraries - -
- Simple API: Clear and easy-to-use interface -
- Customizable: Flexible configuration options -
- Responsive: Adapts to screen resizing -
npm install @h4md1/visual-image-tool-
-
-
- Import
-
-// ES modules (recommended) -import { VisualImageTool } from '@h4md1/visual-image-tool'; - -// CommonJS -const { VisualImageTool } = require('@h4md1/visual-image-tool'); - -// UMD (script tag) -<script src="node_modules/@h4md1/visual-image-tool/dist/visual-image-tool.umd.js"></script> -
- -
- Initialization
-
// With an import or require you hold the class itself. -// Loaded from the UMD script tag it is VisualImageTool.VisualImageTool. -const imageTool = new VisualImageTool({ - imageElement: document.getElementById('myImage'), - debug: true, // Enable debug logs for overlay positioning (optional) ++ + + +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. +
+ +++++++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('Focus point:', data.focusPoint); - console.log('Crop zone:', data.cropZone); - } -});
- -
- Using the features
-
-// Enable the focus point -imageTool.toggleFocusPoint(true); - -// Enable the crop zone -imageTool.toggleCropZone(true); - -// Manually set a focus point -imageTool.setFocusPoint(x, y); - -// Manually set a crop zone -imageTool.setCropZone(x, y, width, height); - -// Get current values -const focusPoint = imageTool.getFocusPoint(); -const cropZone = imageTool.getCropZone(); -
-
- The complete reference — every method, all configuration options and the - framework integration examples — lives in the - README. It is kept in one place so this page cannot drift out of step with - the code. -
- --
-
- Chrome (latest versions) -
- Firefox (latest versions) -
- Safari (latest versions) -
- Edge (latest versions) -
MIT
+ 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
+-
+
- Basic usage +
- Custom configuration +
- ESM import +
- UMD import +
- React +
- Vue +
- Preact +
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.
+