From d9387da48a109ef17391e028d0426dcce4127192 Mon Sep 17 00:00:00 2001 From: Hamdi LAADHARI Date: Mon, 7 Sep 2026 16:26:06 +0200 Subject: [PATCH] feat(site): turn the demo page into a landing page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The page at h4md1.fr/visual-image-tool/ opened on an

and a canvas. It demonstrated the tool without ever saying what the tool is for, what you get back from it, or why you'd pick it over a cropper — so a visitor who didn't already know had to infer the pitch from a controls panel. Restructures it around the demo rather than replacing it. The demo stays at the top, because dragging the marker is what actually explains this library, but it now sits under a headline and a one-line pitch, and above the two things that decide adoption: the table of what the coordinates are for (object-position, imgix, Cloudinary, sharp), and an explicit "no, if" naming Cropper.js for the job this library deliberately doesn't do. Every claim comes from the README or package.json — 3.6 kB gzipped, zero dependencies, bundled types, MIT. Nothing measured here for the first time. The head metadata, the demo markup and its animation script are unchanged; this is a body and stylesheet rewrite. Adds a copy button on the install command, light/dark support, and pins the CDN snippets to 0.3.0 — the README still pointed at @0.2, two minor versions back. Co-Authored-By: Claude Opus 5 --- README.md | 2 +- demo/index.html | 953 ++++++++++++++++++++++++++++++++++-------------- 2 files changed, 671 insertions(+), 284 deletions(-) diff --git a/README.md b/README.md index 7f67b0e..df45c1b 100644 --- a/README.md +++ b/README.md @@ -56,7 +56,7 @@ Or skip the install entirely and load it from a CDN — this is what the [live demo](https://h4md1.fr/visual-image-tool/) does: ```html - + ``` Pin the exact version rather than the major in production. There is a runnable diff --git a/demo/index.html b/demo/index.html index 0d85362..ab738b3 100644 --- a/demo/index.html +++ b/demo/index.html @@ -66,351 +66,719 @@ rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" /> + + -
- VisualImageTool logo -

VisualImageTool

-

- Let people pick the focal point and crop zone. You get the pixel - coordinates. -

-
-
-

Interactive demo

-
-
- Demo landscape + + +
+
+
+ + Visual Image Tool
-
-

Controls

- - -

Current data

-
No data available
-

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
    • +
+ +
+
+ npm install @h4md1/visual-image-tool + +
+ Try it below + GitHub
- - - - - - Try online on JSFiddle - -
Usage without installation
-

- 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>
- -
Quick demos
-
- Basic usage - Custom configuration - ESM import demo - UMD import demo - Preact integration (importmap) - React integration (importmap) - Vue integration (importmap) -
+
-
Features
-
    -
  • - 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
    • -
- -
Installation
- 
npm install @h4md1/visual-image-tool
- -
Quick start guide
-
    -
  1. - 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>
-
    -
    2. -
  2. - 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.
+        
    
+
+        
    
+          
    
+            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 getWhere 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);
-  }
-});
    
-
    3. -
  3. - 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();
-
    -
    4. -
- -
Full API
-

- 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. -

- -
Browser Compatibility
-
    -
  • Chrome (latest versions)
    • -
  • Firefox (latest versions)
    • -
  • Safari (latest versions)
    • -
  • Edge (latest versions)
    • -
- -
License
-

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

+ +
+ +
+

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.

+
- + +
+
+
+
+ npm install @h4md1/visual-image-tool + +
+
+

+ npm + · + GitHub + · + MIT +

+

Built by Hamdi Laadhari.

+
+
+ - + +