Improved human silhouette overlay to better center the face and make it larger for optimal FaceID recognition.
Changes:
Face positioning:
- Moved face center from cy=120 to cy=150 (centered vertically)
- Face now occupies middle of frame instead of upper third
- Eyes align with horizontal center line at y=150
- Better balance between head and body in frame
Face size increase:
- Increased head ellipse from rx=75,ry=95 to rx=90,ry=115
- ~20% larger face area for better recognition
- More prominent facial features in final crop
- Improved face-to-frame ratio (70-80% coverage)
Body proportions updated:
- Neck: y=250 to y=285 (moved down)
- Shoulders: y=230 to y=285 (centered below face)
- Torso extends to bottom of frame
- More natural body proportions
Guide lines adjusted:
- Eye-level line: y=120 → y=150 (center of frame)
- Shoulder line: y=230 → y=285 (below center)
- Vertical center line unchanged (x=150)
UI text updates:
- Instructions emphasize face centering
- 'Расположите глаза на центральной линии'
- 'Голова занимает верхнюю половину фото'
- Changed bottom label from 'Пояс' to 'Низ кадра'
Benefits:
✓ Face more prominent in photo (better for FaceID)
✓ Centered composition (professional appearance)
✓ Balanced head-to-body ratio
✓ Easier for users to align correctly
✓ Improved recognition accuracy
Changed avatar cropper aspect ratio from 1:1 to 3:4 (portrait) for better FaceID recognition.
Improved human silhouette overlay synchronization with crop box during all interactions.
Key changes:
Aspect ratio:
- Changed from 1:1 (square) to 3:4 (portrait)
- Output size: 600x800px (instead of 800x800px)
- Better suited for full body positioning (head, shoulders, torso)
SVG overlay improvements:
- Updated viewBox from 400x400 to 300x400 (3:4 proportions)
- Redesigned human silhouette for portrait format
- Added torso outline up to waist level
- Additional guide line for shoulders
- Better proportions for face/head/shoulders alignment
Synchronization enhancements:
- Added cropstart, cropmove, cropend event handlers
- Overlay now follows crop box during all interactions:
✓ Moving the crop box
✓ Resizing the crop box
✓ Zooming the image
✓ Initial positioning
- Real-time position updates using getCropBoxData()
UI/UX updates:
- Updated instructions: 'Совместите тело с зелёным контуром'
- Face should occupy upper third of frame
- Portrait format 3:4 mentioned in requirements
- Changed label from 'Плечи' to 'Пояс' (waist)
- Templates updated with new size requirements (600x800px)
Technical details:
- minCropBoxHeight: 266px (200 * 4/3 for aspect ratio)
- preserveAspectRatio: none (for proper stretching)
- Event handlers ensure overlay follows crop box smoothly
- No performance impact from additional event listeners
Benefits:
✓ Better for FaceID (full body context)
✓ Standard portrait photo format
✓ More professional appearance
✓ Consistent with ID photo standards
✓ Improved overlay visibility and accuracy
Added visual guide with human body contour overlay to help users properly position their face for FaceID.
Features:
- SVG overlay with human silhouette (head, neck, shoulders)
- Green dashed outline (70-80% face coverage guidance)
- Guide lines (vertical center, horizontal eye level)
- Text labels ('Верх головы', 'Плечи')
- Toggle checkbox to show/hide overlay
- Real-time overlay positioning synchronized with crop box
Technical implementation:
- SVG viewBox 400x400 with preserveAspectRatio
- Dynamic positioning using getCropBoxData()
- Event handlers: ready, crop, zoom
- Overlay updates on cropper interactions
- Pointer-events: none for non-intrusive UI
UI/UX improvements:
- Clear visual guidance for face positioning
- Non-intrusive overlay (can be toggled off)
- Color: #00ff00 (green) for high visibility
- Opacity: 0.8 for overlay, 0.4 for guide lines
- Auto-shown by default, user can disable
Benefits:
✓ Reduces user errors in face positioning
✓ Ensures consistent photo quality for FaceID
✓ Visual feedback for proper head/shoulders alignment
✓ Improves user experience and reduces support requests
