From 28feac732e8e794a309c0bb0116c4f6b3f0e5a6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=98=D0=B3=D0=BE=D1=80=D1=8C=20=D0=9D=D0=B0=D0=B4=D0=B5?= =?UTF-8?q?=D0=B8=D0=BD?= Date: Thu, 18 Dec 2025 10:15:00 +0300 Subject: [PATCH] feat(avatar): change crop ratio to 3:4 portrait and improve overlay sync MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../js/components/avatarCropperHandler.js | 60 ++++++++++++------- backend/templates/auth/register.html | 5 +- .../components/employee_form_personal.html | 5 +- 3 files changed, 44 insertions(+), 26 deletions(-) diff --git a/backend/static/js/components/avatarCropperHandler.js b/backend/static/js/components/avatarCropperHandler.js index c6f6838f..41bce431 100644 --- a/backend/static/js/components/avatarCropperHandler.js +++ b/backend/static/js/components/avatarCropperHandler.js @@ -21,7 +21,7 @@ const DEFAULT_CONFIG = { // Настройки Cropper.js cropperOptions: { - aspectRatio: 1, // Квадратное фото + aspectRatio: 3 / 4, // Портретное фото 3:4 viewMode: 2, // Ограничить canvas областью контейнера dragMode: 'move', // Перемещение изображения autoCropArea: 0.8, // Начальный размер области обрезки (80%) @@ -33,12 +33,13 @@ const DEFAULT_CONFIG = { cropBoxResizable: true, toggleDragModeOnDblclick: false, minCropBoxWidth: 200, - minCropBoxHeight: 200, + minCropBoxHeight: 266, // 200 * 4/3 для сохранения пропорций }, // Требования для FaceID - minOutputSize: 600, // Минимальный размер выходного изображения - outputSize: 800, // Рекомендуемый размер выходного изображения + minOutputSize: 600, // Минимальный размер выходного изображения (по меньшей стороне) + outputWidth: 600, // Ширина выходного изображения (3:4) + outputHeight: 800, // Высота выходного изображения (3:4) outputQuality: 0.92, // Качество JPEG (0.0 - 1.0) outputFormat: 'image/jpeg', // Формат выходного файла @@ -49,12 +50,13 @@ const DEFAULT_CONFIG = {
Требования для системы распознавания лиц:
`, @@ -111,36 +113,41 @@ export class AvatarCropper {
- - +
@@ -321,6 +328,15 @@ export class AvatarCropper { this.updateSizeIndicator(event.detail); this.updateOverlayPosition(); }, + cropstart: () => { + this.updateOverlayPosition(); + }, + cropmove: () => { + this.updateOverlayPosition(); + }, + cropend: () => { + this.updateOverlayPosition(); + }, zoom: () => { this.updateOverlayPosition(); } @@ -409,10 +425,10 @@ export class AvatarCropper { applyBtn.disabled = true; applyBtn.innerHTML = 'Обработка...'; - // Получаем обрезанное изображение + // Получаем обрезанное изображение в пропорциях 3:4 const canvas = this.cropper.getCroppedCanvas({ - width: this.config.outputSize, - height: this.config.outputSize, + width: this.config.outputWidth, + height: this.config.outputHeight, imageSmoothingEnabled: true, imageSmoothingQuality: 'high', }); diff --git a/backend/templates/auth/register.html b/backend/templates/auth/register.html index 42294bdf..7a8e4a82 100644 --- a/backend/templates/auth/register.html +++ b/backend/templates/auth/register.html @@ -118,8 +118,9 @@ Требования для системы распознавания лиц (FaceID):
- • Лицо должно занимать 70-80% кадра
- • Минимальный размер: 600x600px
+ • Портретное фото (пропорции 3:4)
+ • Совместите тело с контуром (голова, плечи, торс)
+ • Минимальный размер: 600x800px
• Форматы: JPG, PNG, GIF. Максимум 10 МБ diff --git a/backend/templates/employees/components/employee_form_personal.html b/backend/templates/employees/components/employee_form_personal.html index 67a4816a..c20e5a40 100644 --- a/backend/templates/employees/components/employee_form_personal.html +++ b/backend/templates/employees/components/employee_form_personal.html @@ -39,8 +39,9 @@ Требования для системы распознавания лиц (FaceID):
- • Лицо должно занимать 70-80% кадра
- • Минимальный размер: 600x600px
+ • Портретное фото (пропорции 3:4)
+ • Совместите тело с контуром (голова, плечи, торс)
+ • Минимальный размер: 600x800px
• Форматы: JPG, PNG, GIF. Максимум 10 МБ {% if emp.avatar %}