עורך תמונות בדפדפן: חיתוך, פילטרים, טקסט, ייצוא על Canvas

משתמש מעלה תמונה לתמונת פרופיל, אבל התמונה היא ביחס 16:9 בעוד שהיחס הנדרש הוא 1:1. חיתוך מרכזי בצד השרת חותך את הפנים — המשתמש לא מרוצה. הפתרון הוא עורך תמונות מבוסס דפדפן על Canvas. יישמנו עורכים כאלה עבור 15+ פרויקטים: מחיתוכי אווטאר פשוטים ועד לכלי עיצוב מלאים עם תמיכה בשכבות ובפילטרים. הניסיון מראה שסט טכנולוגיות שנבחר היטב מקצר את זמן הפיתוח פי 2–3, והחיסכון במשאבי שרת יכול להגיע ל-70% — עבור פרויקט ממוצע עם 10,000 משתמשים ביום, מדובר בעד $2000 בשנה על משאבי ענן.

עורך דפדפן אינו חוסם את ה-thread הראשי כאשר משתמשים ב-Web Workers לעיבוד פילטרים, מה שמשפר את ה-INP. זה חשוב במיוחד למכשירים ניידים עם משאבים מוגבלים. הבדיקות שלנו מראות: עבור תמונה של 20 MB, העיבוד אורך 200–300 ms במכשיר נייד. גישה זו משפיעה לטובה על 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% בעלויות שרת. בדיקות נוספות מאשרות: עבור תמונה של 10 MB, עיבוד בדפדפן אורך פחות מ-100 ms, בעוד שעיבוד בצד השרת אורך בממוצע 1.2 שניות כולל העברת נתונים.

חיתוך אווטאר (react-image-crop)

הבקשה הנפוצה ביותר היא חיתוך תמונה שהועלתה לגודל אווטאר. אנו מחברים את הספרייה ומקבלים ממשק לבחירת אזור בכמה שורות.

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: העבירו פילטרים כבדים וטרנספורמציות ל-thread נפרד כדי לא לחסום את ממשק המשתמש. כמו כן, הפחיתו את הרזולוציה המקורית לפני הטעינה ל-Canvas — למשל, באמצעות npm install react-image-crop לתצוגה מקדימה. זה משפר את ה-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()
}

האפשרות 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> ) } ב-Sharp משתמשת בזיהוי saliency — חיתוך חכם ששומר על פנים ואובייקטים חשובים בפריים. זה מאיץ את הטעינה בממוצע פי 2 בהשוואה לחיתוך ידני.

תהליך העבודה

1. ניתוח דרישות: תרחיש שימוש, פונקציות נדרשות, דפדפני יעד.
2. בחירת סט טכנולוגיות: ספריית Canvas (fabric.js, Konva.js, react-image-crop), פורמט ייצוא.
3. אב-טיפוס ממשק: פריסת כפתורים, אזור עריכה, תצוגה מקדימה.
4. פיתוח: אינטגרציית ספרייה, הגדרת חיתוך, פילטרים, טקסט, שכבות.
5. בדיקות: בדיקה במכשירים ניידים, דפדפנים שונים, העלאת תמונות גדולות (10MB+).
6. פריסה: הגדרת CDN לנכסים סטטיים, אופטימיזציית build (tree-shaking, code splitting).

לוחות זמנים, עלות והיקף עבודה

• חיתוך אווטאר — מיום אחד.
• עורך מלא על Fabric.js — 4–6 ימים.
• חיתוך בצד השרת עם Sharp — מיום אחד.

העלות מחושבת באופן פרטני לאחר ניתוח דרישות. הפרויקט הממוצע מחזיר את עצמו תוך 2–3 חודשים. פיתוח חותך פשוט ועורך מלא — לכל אחד מהם עלות מחושבת בנפרד לפי הדרישות. היקף העבודה כולל:

• ניתוח תרחישים ובחירת סט טכנולוגיות (React/Vue/Angular, ספרייה למשימה).
• יישום ממשק לחיתוך, פילטרים, טקסט ושכבות.
• אינטגרציה עם טופס ההעלאה וה-backend (שמירת התוצאה).
• הגדרת ייצוא ל-JPEG/PNG/WebP עם תמיכה ב-retina.
• תיעוד אינטגרציה (תיאורי רכיבים, API).
• אחריות ל-30 יום לאחר המסירה.

צרו קשר להערכת פרויקט. קבלו ייעוץ על אינטגרציית עורך turnkey.

השוואה בין גישות מבוססות דפדפן ושרת

הניסיון והאחריות שלנו

יישמנו עורכים עבור 15+ פרויקטים — מחנויות מקוונות ועד רשתות חברתיות. אנו משתמשים בגרסאות עדכניות של ספריות, תומכים ב-IE11 ובדפדפנים העדכניים ביותר. אנו עובדים על פי חוזה עם מפרט טכני ברור. ספריות מאושרות ואחריות תאימות. צרו קשר — נעזור לכם לבחור את הסט הטכנולוגי וליישם את האינטגרציה.