PhotoMeasure

A Vue 3 + TypeScript image annotation library using Konva.js for rendering high-resolution images with interactive polygon shapes, measurements, and regions.

Features

- 🖼️ High-resolution image support with tile-based rendering (useTileRenderer)
- 📄 PDF Support with high-performance rendering (usePdf)
- 🔍 Smooth zoom & pan with mouse wheel, pinch gestures, and programmatic control
- 📐 Interactive polygons with vertex editing, edge labels, and undo/redo history
- 🎯 Multi-polygon support with chaining mode and auto-alignment
- 📱 Mobile-friendly touch interactions
- 🎨 Customizable styling for strokes, fills, and labels
- 💾 Advanced Exporting: Export stage or pure canvas as base64 PNG
- 📦 Full TypeScript support with exported types

Installation

``bash
npm install photomeasure
`

$3

`bash
npm install konva vue-konva pdfjs-dist uuid
`

Quick Start

`vue



`

PDF Support

Use the usePdf composable to load and render PDF documents as images for the InspectorViewer.

`typescript
import { usePdf } from 'photomeasure'

const { setSource, getPageImage, pageCount } = usePdf()

// Load a PDF
await setSource('path/to/document.pdf')

// Get a specific page as a WebP data URL
const imageUrl = await getPageImage(1, 2.0) // page 1, 2x scale
`

Composables

$3

Manages polygon state with undo/redo history and provides stage exporting.

`typescript
import { useImagePolygonLoader } from 'photomeasure'

const {
polygons,
loadImage,
undo,
redo,
canUndo,
canRedo,
exportStageAsBase64
} = useImagePolygonLoader()

// Load image and polygons
await loadImage('image.jpg')
loadPolygons(initialShapes)

// Export current view
const dataUrl = await exportStageAsBase64(viewerRef.value)
`

$3

Optimizes rendering for extremely large images by splitting them into tiles.

`typescript
import { useTileRenderer } from 'photomeasure'

const { updateView, updateVisibleTiles } = useTileRenderer({
tileContainer: containerRef,
stageRef: viewerRef,
stageScale: currentScale,
// ... other options
})
`

$3

Exports a high-quality image of the annotation view without rendering it to the visible DOM.

`typescript
import { useOffscreenInspectorExporter } from 'photomeasure'

const { exportFromInspector } = useOffscreenInspectorExporter()
const dataUrl = await exportFromInspector(imageUrl, polygons)
`

Components

$3

The main stage component for displaying images and annotations.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| imageUrl | string | '' | URL of the image to display |
| initialScale | number | 1 | Initial zoom scale |
| isDraggable | boolean | true | Enable stage panning |
| backgroundColor | string | '#f0f0f0' | Background color |

$3


A versatile component that renders either a single Polygon or a MultiPolygon based on the shape type.

Development

`bash


Install dependencies

npm install

Start dev server

npm run dev

Build library

npm run build:lib
``

License

MIT