USG Image editor

📤 Upload Image

✏️ Draw

▭ Rect

🅰️ Text

✋ Pan

Color Size

Tip: Drag & drop an image onto the area above, or use Upload. Click "Text" then click on the image to place text. Use Save to download PNG.

---

Image Upload & Annotation — User Manual

This Image Upload & Annotation tool provides a simple browser-based workspace to upload, annotate, and export images for reporting or educational use. It runs entirely in the client (browser) and supports drag & drop upload, freehand drawing, rectangle overlays, text labels, panning, undo/clear and PNG export.

1. Interface Overview

Top controls include Upload, Clear, Undo, Save / Download and Open. Tool selection (Draw / Rect / Text / Pan) and the color/size controls are at the right. The central canvas area displays the loaded image and accepts drawing and annotations. Tooltips and a brief hint explain usage.

2. Uploading Images

You can add images by:

• Clicking Upload Image and selecting a file (JPEG/PNG).
• Dragging & dropping an image onto the canvas area.

After upload the image is fitted to the canvas while preserving aspect ratio. The original image remains embedded in the canvas as pixels so annotations are flattened onto it.

3. Tools & Controls

Toolset:

• Draw (✏️): Freehand drawing. Click/touch to start and drag to draw. Stroke color and thickness are set from the Color and Size controls.
• Rect (▭): Click and drag to draw rectangular outlines. Useful to highlight regions of interest.
• Text (🅰️): Click the canvas where you want to place text; a prompt appears to enter the label. Text uses the selected color and an appropriate font size derived from the Size control.
• Pan (✋): Click-drag to move the image inside the canvas (useful when zoom/pan is implemented or when you want to reposition the fitted image).

4. Color & Size

Use the Color input to choose annotation color. The Size range sets stroke width for drawing and outline thickness for shapes; it also influences text size. Adjust these before drawing for consistent annotations.

5. History: Undo & Clear

The tool maintains an internal history buffer (multiple undo). Click Undo (or press Ctrl/Cmd + Z) to revert the last action. Click Clear to remove the current image and all annotations — this action prompts for confirmation.

6. Export & Open

Save / Download: Exports the current canvas as a PNG (flattened image with annotations). Open: Opens the exported PNG in a new browser tab (useful for quick review or saving via browser tools). Note: exported images are raster PNGs — vector layer editing is not available once the image is flattened.

7. Touch & Mobile

The canvas supports touch input. Use single-finger drag for drawing and the Pan tool when supported. Touch gestures and device pixel ratio are handled so strokes remain smooth on high-DPI screens.

8. Best Practices

• Prefer high-resolution source images for clearer annotations and better offline printing quality.
• Place text labels near but not overlapping key structures; keep wording short and standardized (e.g., “Cyst — 12 mm”).
• Use contrasting colors (red/yellow) against typical grayscale ultrasound images to ensure visibility.
• Save a copy of the original image prior to annotation if you need the unaltered study for records.

9. Limitations

• This tool flattens annotations into the exported image; there is no layered project file format in this build.
• All processing and storage are client-side in the browser. Images are not uploaded to a server by default — confirm your integration before enabling network uploads.
• Text placement uses a simple prompt — advanced text formatting (multi-line editing, fonts) is limited.
• This tool is not a diagnostic system; annotations are for reporting, teaching, or documentation and should be used under appropriate clinical governance.

10. Troubleshooting

Common issues:

• Blank canvas after upload: Resize the browser or call the Resize function; ensure the file is a valid image format.
• Undo not working: History buffer may be empty; actions are pushed to history after image load and drawing operations.
• Slow performance for very large images: Resize or downscale the source image before uploading for smoother drawing.
• Saved PNG blurred: Browser/device pixel ratio affects exported resolution. Use high-DPI canvas sizing or export original-size render if implemented.

Declaration

This Image Upload & Annotation tool is provided as a documentation and reporting aid. It is intended for educational and non-diagnostic documentation purposes unless integrated and validated within a regulated clinical workflow. The creator and distributor do not accept liability for clinical decisions made solely on annotated images produced by this tool. Users must follow institutional policies regarding patient data, image storage, and consent.

Created and declared by:
R.K. Mourj — Radioimaging Technologist