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> |
||
|---|---|---|
| .. | ||
| src | ||
| index.html | ||
| package.json | ||
| postcss.config.js | ||
| tailwind.config.js | ||
| vite.config.js | ||