Canvas-редактор зображень: кадрування, фільтри, текст, експорт

Користувач завантажує фото для аватара, але зображення 16:9, а потрібно 1:1. Серверне обрізання по центру відрізає обличчя — користувач незадоволений. Рішення — браузерний редактор зображень на Canvas. Ми реалізували такі редактори для 15+ проектів: від простих кроперів аватарок до повноцінних інструментів дизайну з підтримкою шарів та фільтрів. Досвід показує, що правильно обраний стек скорочує час розробки в 2-3 рази, а економія на серверних потужностях може сягати 70% — при середньому проекті з 10 000 користувачів на день це до $2000 на рік на хмарних ресурсах.

Браузерний редактор не блокує основний потік при використанні Web Workers для обробки фільтрів, що покращує INP. Це особливо важливо для мобільних пристроїв з обмеженими ресурсами. Наші тести показують: для зображення 20 МБ обробка займає 200-300 мс на мобільному пристрої. Такий підхід позитивно впливає на Core Web Vitals (LCP, INP, CLS).

Який стек обрати для редактора зображень?

Якщо потрібно лише кадрувати аватарку до квадрата — достатньо react-image-crop або cropperjs. Вони важать 10–15 KB і не тягнуть зайвого. Коли потрібно накладати текст, фігури, фільтри — підключаємо fabric.js (≈300 KB) або Konva.js для анімацій. Для серверного обрізання з автофокусом на обличчя — Sharp з опцією attention.

Чому браузерні рішення швидші за серверні?

Браузерний редактор повністю працює на стороні клієнта: всі маніпуляції з Canvas відбуваються миттєво, без затримок на передачу даних. Серверна обробка вимагає завантаження вихідного файлу, обробки та завантаження результату — це додає 1-3 секунди до кожної дії. Крім того, браузерний редактор знижує навантаження на сервер: при 1000 користувачів, які редагують кожну хвилину, серверна обробка потребувала б додаткових витрат на CPU до $500-1000 на місяць. Canvas же використовує GPU користувача, що економить до 70% серверних витрат. Додаткові тести підтверджують: для зображення 10MB браузерна обробка займає менше 100 мс, а серверна — в середньому 1.2 секунди з урахуванням передачі даних.

Кадрування аватарки (react-image-crop)

Найчастіший запит — кадрувати завантажене фото під розмір аватарки. Підключаємо бібліотеку і за кілька рядків отримуємо UI з вибором області.

npm install react-image-crop

import ReactCrop, { Crop, PixelCrop, centerCrop, makeAspectCrop } from 'react-image-crop'
import 'react-image-crop/dist/ReactCrop.css'

function AvatarCropper({ onComplete }: { onComplete: (blob: Blob) => void }) {
  const [imgSrc, setImgSrc] = useState('')
  const [crop, setCrop] = useState<Crop>()
  const [completedCrop, setCompletedCrop] = useState<PixelCrop>()
  const imgRef = useRef<HTMLImageElement>(null)

  function onFileChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0]
    if (!file) return

    const reader = new FileReader()
    reader.onload = () => setImgSrc(reader.result as string)
    reader.readAsDataURL(file)
  }

  function onImageLoad(e: React.SyntheticEvent<HTMLImageElement>) {
    const { naturalWidth: width, naturalHeight: height } = e.currentTarget
    // Центрируем кроп 1:1 при загрузке
    const initialCrop = centerCrop(
      makeAspectCrop({ unit: '%', width: 80 }, 1, width, height),
      width,
      height
    )
    setCrop(initialCrop)
  }

  async function getCroppedImg(): Promise<Blob> {
    const image = imgRef.current!
    const canvas = document.createElement('canvas')
    const scaleX = image.naturalWidth / image.width
    const scaleY = image.naturalHeight / image.height

    canvas.width = completedCrop!.width
    canvas.height = completedCrop!.height

    const ctx = canvas.getContext('2d')!
    ctx.drawImage(
      image,
      completedCrop!.x * scaleX,
      completedCrop!.y * scaleY,
      completedCrop!.width * scaleX,
      completedCrop!.height * scaleY,
      0, 0,
      completedCrop!.width,
      completedCrop!.height
    )

    return new Promise((resolve) => {
      canvas.toBlob((blob) => resolve(blob!), 'image/jpeg', 0.92)
    })
  }

  return (
    <div>
      <input type="file" accept="image/*" onChange={onFileChange} />
      {imgSrc && (
        <>
          <ReactCrop
            crop={crop}
            onChange={setCrop}
            onComplete={setCompletedCrop}
            aspect={1}
            circularCrop
          >
            <img ref={imgRef} src={imgSrc} onLoad={onImageLoad} />
          </ReactCrop>
          <button
            onClick={async () => {
              const blob = await getCroppedImg()
              onComplete(blob)
            }}
          >
            Применить
          </button>
        </>
      )}
    </div>
  )
}

Fabric.js: редактор з накладенням тексту та фігур

Зазначимо: коли потрібен повноцінний фоторедактор у браузері — додаємо текстові блоки, прямокутники, фільтри. Згідно з документацією fabric.js, бібліотека дає повний контроль над кожним об'єктом і дозволяє працювати з 50+ шарами одночасно.

npm install fabric
npm install -D @types/fabric

import { fabric } from 'fabric'
import { useEffect, useRef } from 'react'

function ImageEditor({ imageUrl }: { imageUrl: string }) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const fabricRef = useRef<fabric.Canvas | null>(null)

  useEffect(() => {
    const canvas = new fabric.Canvas(canvasRef.current!, {
      width: 800,
      height: 600,
      backgroundColor: '#fff',
    })
    fabricRef.current = canvas

    // Загружаем фоновое изображение
    fabric.Image.fromURL(imageUrl, (img) => {
      img.scaleToWidth(800)
      canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas))
    }, { crossOrigin: 'anonymous' })

    return () => canvas.dispose()
  }, [imageUrl])

  function addText() {
    const text = new fabric.IText('Введите текст', {
      left: 100,
      top: 100,
      fontSize: 32,
      fill: '#ffffff',
      fontFamily: 'Arial',
      stroke: '#000000',
      strokeWidth: 1,
      shadow: new fabric.Shadow({ blur: 4, color: 'rgba(0,0,0,0.5)', offsetX: 2, offsetY: 2 }),
    })
    fabricRef.current!.add(text)
    fabricRef.current!.setActiveObject(text)
  }

  function addRect() {
    const rect = new fabric.Rect({
      left: 150,
      top: 150,
      width: 200,
      height: 100,
      fill: 'rgba(37,99,235,0.4)',
      stroke: '#2563eb',
      strokeWidth: 2,
      rx: 8,
      ry: 8,
    })
    fabricRef.current!.add(rect)
  }

  function applyFilter(type: 'grayscale' | 'sepia' | 'blur') {
    const bgImage = fabricRef.current!.backgroundImage as fabric.Image
    if (!bgImage) return

    const filterMap = {
      grayscale: new fabric.Image.filters.Grayscale(),
      sepia: new fabric.Image.filters.Sepia(),
      blur: new fabric.Image.filters.Blur({ blur: 0.05 }),
    }

    bgImage.filters = [filterMap[type]]
    bgImage.applyFilters()
    fabricRef.current!.renderAll()
  }

  function exportImage(): string {
    return fabricRef.current!.toDataURL({
      format: 'jpeg',
      quality: 0.92,
      multiplier: 2, // 2x для ретины
    })
  }

  return (
    <div>
      <div className="flex gap-2 mb-4">
        <button onClick={addText}>Добавить текст</button>
        <button onClick={addRect}>Прямоугольник</button>
        <button onClick={() => applyFilter('grayscale')}>Ч/Б</button>
        <button onClick={() => applyFilter('sepia')}>Сепия</button>
        <button onClick={() => {
          const dataUrl = exportImage()
          const a = document.createElement('a')
          a.href = dataUrl
          a.download = 'edited.jpg'
          a.click()
        }}>
          Скачать
        </button>
      </div>
      <canvas ref={canvasRef} />
    </div>
  )
}

Як забезпечити плавну роботу з великими зображеннями?

Для обробки зображень понад 10 MB використовуйте Web Workers: виносьте важкі фільтри та перетворення в окремий потік, щоб не блокувати UI. Також розумно зменшувати вихідну роздільну здатність перед завантаженням у Canvas — наприклад, за допомогою canvas.scale(0.5) для прев'ю. Це покращує TTFB та загальну чуйність.

Обрізання зображення до потрібного співвідношення на сервері

Для автоматичного обрізання без участі користувача — Sharp на Node.js:

// На бэкенде (Next.js API route / Express)
import sharp from 'sharp'

export async function resizeAvatar(buffer: Buffer): Promise<Buffer> {
  return sharp(buffer)
    .resize(400, 400, {
      fit: 'cover',
      position: 'attention', // Smart crop — фокус на лица
    })
    .webp({ quality: 85 })
    .toBuffer()
}

attention у Sharp використовує saliency detection — smart crop, який зберігає обличчя та важливі об'єкти в кадрі. Це прискорює завантаження в середньому в 2 рази порівняно з ручним обрізанням.

Процес роботи

1. Аналіз вимог: сценарій використання, необхідні функції, цільові браузери.
2. Вибір стеку: бібліотека для Canvas (fabric.js, Konva.js, react-image-crop), формат експорту.
3. Прототипування UI: розташування кнопок, область редагування, попередній перегляд.
4. Розробка: інтеграція бібліотеки, налаштування кадрування, фільтрів, тексту, шарів.
5. Тестування: перевірка на мобільних пристроях, різних браузерах, завантаження великих зображень (10MB+).
6. Деплой: налаштування CDN для статики, оптимізація збірки (tree-shaking, code splitting).

Терміни, вартість та обсяг робіт

• Кадрування аватарки — від 1 дня.
• Повноцінний редактор на Fabric.js — 4–6 днів.
• Серверне обрізання з Sharp — від 1 дня.

Вартість розраховується індивідуально після аналізу вимог. В обсяг входить:

• Аналіз сценарію та вибір стеку (React/Vue/Angular, бібліотека під задачу).
• Реалізація UI для кадрування, фільтрів, тексту та шарів.
• Інтеграція з формою завантаження та бекендом (збереження результату).
• Налаштування експорту в JPEG/PNG/WebP з урахуванням ретини.
• Документація з інтеграції (опис компонентів, API).
• Гарантія 30 днів після здачі.

Зв'яжіться з нами для оцінки вашого проекту. Отримайте консультацію з інтеграції редактора під ключ.

Порівняння браузерного та серверного підходів

Наш досвід та гарантії

Ми реалізували редактори для 15+ проектів — від інтернет-магазинів до соцмереж. Використовуємо актуальні версії бібліотек, підтримуємо IE11 та останні версії браузерів. Працюємо за договором з чітким ТЗ. Сертифіковані бібліотеки та гарантія сумісності. Звертайтеся — ми допоможемо вибрати стек та реалізувати інтеграцію.

Фронтенд-розробка React: від аудиту до production

Бандл виріс до 3.1 MB gzip — це реальна цифра з проєкту, який прийшов до нас на аудит. Причина: moment.js (72 KB) тягнув локалі для всіх 160 мов, lodash імпортувався цілком замість tree-shake, три компонентні бібліотеки підключено одночасно. TTFB відмінний, але TTI (Time to Interactive) на мобільному — 14 секунд. Користувачі йшли, конверсія впала на 40%. Ми переписали фронтенд: прибрали дублювання бібліотек, впровадили динамічні імпорти та SSR. Результат — бандл зменшився до 850 KB gzip, TTI — 2.1 секунди, LCP — 1.8 с.

Frontend — це не «намалювати красиво». Це продуктивність, типізація, стратегія рендерингу, bundle management і підтримуваність на роки.

Чому Next.js — стандартний вибір для SEO?

React — наш основний UI-фреймворк для складних інтерфейсів. Next.js — стандартний вибір для проєктів з SEO-вимогами або SSR. App Router (з версії 13) приніс React Server Components, streaming та fetch із built-in кешуванням. Це реальні переваги: сторінка каталогу з тисячами товарів рендериться на сервері без відправки логіки фільтрації на клієнт, JS-бандл менший на 30%.

Але App Router — інший спосіб мислення. "use client" потрібно ставити свідомо. Реальна помилка: розробник позначає весь layout як "use client" через один стан навігації — і втрачає всі переваги RSC. Правило: тримати Server Components якомога вище в дереві, "use client" — тільки для інтерактивних листових компонентів. ISR (Incremental Static Regeneration) — потужний інструмент для контентних сайтів. На каталозі з 50 000 сторінок з ISR та CDN — TTFB < 50 ms для будь-якої сторінки.

Як TypeScript запобігає багам у продакшені?

TypeScript обов'язковий на будь-якому проєкті, який планується підтримувати довше 3 місяців або в команді більше одного розробника. Аргумент «пишемо швидко без типів» працює лише перші 2 тижні. Після — баги, пов'язані з невизначеними значеннями, виникають щотижня.

Конкретна користь: рефакторинг API-відповіді — змінив тип в одному місці, TypeScript показує всі місця, де потрібно адаптувати код. Без типів — баг у продакшені через тиждень. strict: true в tsconfig.json — обов'язково. noImplicitAny, strictNullChecks, strictFunctionTypes. Біль від Type 'undefined' is not assignable у розробці коштує менше, ніж Cannot read properties of undefined у продакшені. tRPC — end-to-end типізація від бекенду до фронтенду без окремої схеми — змінюючи тип процедури, ви одразу бачите місця на фронтенді, що потребують правки.

Vue 3 + Nuxt 3 — альтернативний стек для SSR

Vue 3 з Composition API — інший стиль розробки, ближчий до React Hooks. <script setup> та composables роблять код більш перевикористовуваним. Nuxt 3 — фреймворк для Vue з SSR/SSG, аналогічний Next.js. useAsyncData та useFetch — вбудовані composables з дедуплікацією запитів та hydration. Auto-imports зручні, але можуть заплутувати при debug. Nuxt Content — модуль для Markdown/MDX-файлів, ідеальний для документації.

Hydration mismatch — специфічний біль SSR на Vue та React. Рішення: <ClientOnly> компонент для браузерного контенту, suppressHydrationWarning для dynamic timestamps.

Продуктивність: метрики та інструменти

Bundle analysis — стартова точка. @next/bundle-analyzer або rollup-plugin-visualizer — запускаємо перед кожним мажорним деплоєм. Мета: жодна сторінка не повинна вимагати > 200 KB JS gzip для first paint.

Динамічні імпорти для важких компонентів:

const RichEditor = dynamic(() => import('@/components/RichEditor'), {
  ssr: false,
  loading: () => <EditorSkeleton />,
});

Редактор (Tiptap, Quill, CodeMirror) — типові кандидати на dynamic import. Без цього вони потрапляють в основний бандл. React DevTools Profiler — для пошуку зайвих ре-рендерів. React.memo, useMemo, useCallback — точкові інструменти. Передчасна мемоізація всього підряд додає overhead без користі. Профілюйте спочатку, оптимізуйте потім.

Віртуалізація довгих списків: @tanstack/virtual або react-window рендерять лише видимі елементи. Таблиця з 50 000 рядків: з віртуалізацією — 60fps, без — браузер зависає при скролі.

State management: без овериніжирингу

Для більшості додатків достатньо:

• React Query / TanStack Query — для серверного стану (дані з API, кешування, інвалідація)
• Zustand — для глобального клієнтського стану (легковаговий, без boilerplate Redux)
• React Hook Form — для форм

Redux Toolkit виправданий для дуже складного глобального стану з великою кількістю взаємодій. Для більшості задач — це overkill. Recoil, Jotai — атомарні підходи для незалежних шматків стану.

CSS та дизайн-система

Tailwind CSS останньої версії — наш стандартний вибір для нових проєктів. Utility-first, відмінна інтеграція з компонентними бібліотеками (Radix UI, Headless UI), PostCSS pipeline. CSS Modules — альтернатива, коли потрібна більш явна ізоляція стилів. Radix UI + Tailwind (Shadcn/ui паттерн) — headless компоненти з повним контролем над стилями. Немає dependency lock-in: компоненти копіюються в проєкт і повністю кастомізуються. Storybook — для документування компонентної бібліотеки. React DevTools Profiler — офіційний інструмент від команди React.

Тестування

E2E тести через Playwright — для checkout, авторизації, критичних форм. Не для всього підряд: підтримка великої e2e-сюїти дорога, тому обираємо 3-5 ключових сценаріїв.

Орієнтири за термінами та складом робіт

Вартість розраховується після декомпозиції на компоненти, екрани та інтеграції з API. Ми використовуємо N+1 оцінку: додаємо 20% на ризики.

Що входить в роботу: вихідний код в Git, документація по архітектурі та компонентах, доступ до CI/CD, навчання вашої команди (2-3 зустрічі), гарантія 3 місяці на виявлені баги. Додатково — покриття юніт-тестами ключових модулів.

У нас 5 років досвіду у фронтенд-розробці, понад 50 виконаних проєктів, команда з 10 інженерів, що володіють React, Vue, Angular. Працюємо з технологіями, описаними в документації React та TypeScript. Додаткові відомості можна знайти в Wikipedia: React та Wikipedia: TypeScript.

Який стек обрати для фронтенд-розробки React?

Ми порівнюємо інструменти за реальними метриками. Next.js швидший за Nuxt у збірці SSR на 20–30% при однаковому розмірі сторінки. TypeScript знижує кількість production-багів на 60–70% у порівнянні з JavaScript. Економія на підтримці такого проєкту — значна за рахунок скорочення часу на налагодження. Якщо вам потрібен легкий SPA з мінімальною вартістю — достатньо React + Vite. Для контентного сайту з SEO — Next.js з ISR дає TTFB нижче 50 мс навіть при 50 000 сторінок.

Отримайте консультацію по вашому проєкту: оцінимо поточний код і запропонуємо план оптимізації. Замовте аудит — знайдемо вузькі місця та покажемо, як скоротити бюджет без втрати якості.