This commit implements comprehensive image extraction display for PDF documents:
1. Created useDocumentImages.js composable:
- fetchPageImages() function to retrieve images for specific page
- getImageUrl() helper to generate full image URLs
- Proper loading states and error handling
2. Created ImageOverlay.vue component:
- Positioned absolutely over PDF canvas at correct coordinates
- Semi-transparent border to indicate image location
- Hover tooltip displaying extracted OCR text with confidence level
- Click handler to open full-size image modal
- Accessibility support (keyboard navigation, ARIA labels)
- Responsive positioning with smooth hover effects
3. Modified DocumentView.vue:
- Imported and integrated useDocumentImages composable
- Added ImageOverlay components for each extracted image
- Integrated FigureZoom modal for full-size image viewing
- Automatically fetches images when page changes
- Displays image count in header
- Tracks canvas dimensions for proper image positioning
Features:
- Images overlay at exact PDF coordinates using scale conversion
- OCR text displayed in tooltip on hover
- Full-size image view on click with zoom/pan controls
- Reduced motion and high contrast mode support
- Seamless integration with existing PDF viewer
Generated with Claude Code (https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Comprehensive image extraction architecture design
- Database schema for document_images table
- Migration 004: Add document_images table with indexes
- Migration runner script
- Design and status documentation
Prepares foundation for image extraction feature with OCR on images.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
