Реалізація обрізки та редагування зображень перед завантаженням на сайт
Завантаження зображень без попередньої обробки на клієнті — джерело болю для серверної частини: неправильні пропорції аватарок, багатомегабайтні оригінали в базі, невідповідність aspect ratio вимогам макету. Клієнтська обрізка вирішує це до відправки файлу.
Стек та вибір бібліотеки
Два основних гравці: Cropper.js (vanilla, ~34 KB gzip) та react-image-crop (React-специфічна, ~6 KB). Для Vue є vue-cropper. Для складних сценаріїв з фільтрами та текстом — Fabric.js або Konva.js, але це надлишково для більшості завдань.
Вибір простий:
- Потрібен React —
react-image-cropабоreact-cropper(обгортка над Cropper.js) - Потрібен vanilla/jQuery — Cropper.js безпосередньо
- Потрібні повороти, фільтри, текст поверх — Cropper.js з розширеннями
Базова реалізація на react-image-crop
import { useState, useRef, useCallback } from 'react'
import ReactCrop, { Crop, PixelCrop, centerCrop, makeAspectCrop } from 'react-image-crop'
import 'react-image-crop/dist/ReactCrop.css'
function centerAspectCrop(width: number, height: number, aspect: number): Crop {
return centerCrop(
makeAspectCrop({ unit: '%', width: 90 }, aspect, width, height),
width,
height
)
}
export function ImageCropUploader({ aspect = 1, onUpload }: {
aspect?: number
onUpload: (blob: Blob) => Promise<void>
}) {
const [imgSrc, setImgSrc] = useState('')
const [crop, setCrop] = useState<Crop>()
const [completedCrop, setCompletedCrop] = useState<PixelCrop>()
const imgRef = useRef<HTMLImageElement>(null)
function onSelectFile(e: React.ChangeEvent<HTMLInputElement>) {
if (e.target.files?.[0]) {
const reader = new FileReader()
reader.addEventListener('load', () => setImgSrc(reader.result?.toString() ?? ''))
reader.readAsDataURL(e.target.files[0])
}
}
function onImageLoad(e: React.SyntheticEvent<HTMLImageElement>) {
const { width, height } = e.currentTarget
setCrop(centerAspectCrop(width, height, aspect))
}
const getCroppedBlob = useCallback((): Promise<Blob> => {
const image = imgRef.current
if (!image || !completedCrop) throw new Error('No crop data')
const canvas = document.createElement('canvas')
const scaleX = image.naturalWidth / image.width
const scaleY = image.naturalHeight / image.height
canvas.width = completedCrop.width * scaleX
canvas.height = completedCrop.height * scaleY
const ctx = canvas.getContext('2d')!
ctx.drawImage(
image,
completedCrop.x * scaleX,
completedCrop.y * scaleY,
completedCrop.width * scaleX,
completedCrop.height * scaleY,
0, 0,
canvas.width,
canvas.height
)
return new Promise((resolve, reject) => {
canvas.toBlob(blob => blob ? resolve(blob) : reject(new Error('Canvas empty')), 'image/webp', 0.9)
})
}, [completedCrop])
async function handleSubmit() {
const blob = await getCroppedBlob()
await onUpload(blob)
}
return (
<div>
<input type="file" accept="image/*" onChange={onSelectFile} />
{imgSrc && (
<ReactCrop
crop={crop}
onChange={setCrop}
onComplete={setCompletedCrop}
aspect={aspect}
minWidth={100}
>
<img ref={imgRef} src={imgSrc} onLoad={onImageLoad} />
</ReactCrop>
)}
{completedCrop && (
<button onClick={handleSubmit}>Завантажити</button>
)}
</div>
)
}
Ключовий момент — масштабування через naturalWidth / width. Браузер відображає зображення в зменшеному вигляді, але вирізати потрібно з оригіналу.
Відправка через FormData на сервер
async function uploadCroppedImage(blob: Blob): Promise<void> {
const formData = new FormData()
// Ім'я файлу з розширенням — важливо для mime-type на сервері
formData.append('avatar', blob, `avatar-${Date.now()}.webp`)
const response = await fetch('/api/users/avatar', {
method: 'POST',
headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')!.getAttribute('content')! },
body: formData,
})
if (!response.ok) throw new Error(`Upload failed: ${response.status}`)
}
На Laravel-стороні файл приходить як звичайний $request->file('avatar'). Додаткова серверна обрізка не потрібна — розміри вже правильні.
Просунутий сценарій: Cropper.js з поворотом та зумом
<div>
<img id="image" src="/original.jpg">
<button onclick="cropper.rotate(90)">Повернути</button>
<button onclick="cropper.zoom(0.1)">+</button>
<button onclick="cropper.zoom(-0.1)">-</button>
<button onclick="uploadCropped()">Завантажити</button>
</div>
<script>
const cropper = new Cropper(document.getElementById('image'), {
aspectRatio: 16 / 9,
viewMode: 2, // не виходити за границі зображення
dragMode: 'move',
autoCropArea: 0.8,
restore: false,
guides: true,
center: true,
highlight: false,
cropBoxMovable: true,
cropBoxResizable: true,
toggleDragModeOnDblclick: false,
})
async function uploadCropped() {
cropper.getCroppedCanvas({
maxWidth: 1920,
maxHeight: 1080,
imageSmoothingEnabled: true,
imageSmoothingQuality: 'high',
}).toBlob(async (blob) => {
const fd = new FormData()
fd.append('image', blob, 'cover.webp')
await fetch('/api/upload', { method: 'POST', body: fd })
}, 'image/webp', 0.85)
}
</script>
Обробка EXIF-орієнтації
Мобільні фото часто приходять повернутими через метадані EXIF. Для надійності — бібліотека exifr:
import { parse } from 'exifr'
async function fixOrientation(file: File): Promise<string> {
const exif = await parse(file, { orientation: true })
return new Promise(resolve => {
const reader = new FileReader()
reader.onload = (e) => {
const img = new Image()
img.onload = () => {
const canvas = document.createElement('canvas')
const rotation = exif?.Orientation ?? 1
// застосовуємо трансформацію за таблицею EXIF
applyExifRotation(canvas, img, rotation)
resolve(canvas.toDataURL())
}
img.src = e.target!.result as string
}
reader.readAsDataURL(file)
})
}
Обмеження на розмір до обрізки
Завантажити 20 МБ оригіналу, щоб потім вирізати 200×200 — розтратно. Перевіряємо перед показом кропа:
const MAX_SIZE_MB = 10
const MAX_DIMENSION = 4096
function validateImage(file: File): string | null {
if (file.size > MAX_SIZE_MB * 1024 * 1024) {
return `Файл занадто великий. Максимум ${MAX_SIZE_MB} МБ`
}
return null
}
// Для перевірки розмірів — тільки після завантаження в img
function checkDimensions(img: HTMLImageElement): string | null {
if (img.naturalWidth > MAX_DIMENSION || img.naturalHeight > MAX_DIMENSION) {
return `Зображення занадто велике. Максимум ${MAX_DIMENSION}px`
}
return null
}
Якщо потрібно прийняти великі файли — ресайзити до розумних розмірів перед кропом через canvas.drawImage із зменшеними canvas.width/height.
Попередній перегляд до та після
function CropPreview({ crop, imgRef }: { crop: PixelCrop; imgRef: React.RefObject<HTMLImageElement> }) {
const previewRef = useRef<HTMLCanvasElement>(null)
useEffect(() => {
if (!crop || !imgRef.current || !previewRef.current) return
const img = imgRef.current
const canvas = previewRef.current
const ctx = canvas.getContext('2d')!
const scaleX = img.naturalWidth / img.width
const scaleY = img.naturalHeight / img.height
const pixelRatio = window.devicePixelRatio
canvas.width = 150 * pixelRatio
canvas.height = 150 * pixelRatio
ctx.scale(pixelRatio, pixelRatio)
ctx.drawImage(img,
crop.x * scaleX, crop.y * scaleY,
crop.width * scaleX, crop.height * scaleY,
0, 0, 150, 150
)
}, [crop, imgRef])
return <canvas ref={previewRef} style={{ width: 150, height: 150, borderRadius: '50%' }} />
}
Терміни реалізації
Базова інтеграція кропа з завантаженням — 4–6 годин. З поворотом, EXIF-коррекцією, попереднім переглядом, валідацією та адаптивною версткою модального вікна — 1–2 дні. Якщо потрібна мультизавантаження з індивідуальним кропом кожного файлу — окремо завдання на 3–5 днів.