Image Editor Implementation for Website

Implementing Image Editor on Website

An embedded image editor is needed where users should process photos right in browser: avatars with cropping, certificate generators, marketing material editors, screenshot annotation tools. Sending user to Photoshop is unacceptable for modern UX.

Stack by Scenario

Cropping and resize — react-image-crop or cropperjs. Most common scenario — avatar upload.

Full editor with filters, text, layers — fabric.js on top of Canvas. Weighs ~300 KB, but gives complete control.

Professional level (annotation, lasso, brushes) — tui-image-editor (Toast UI) or konva.js.

Avatar Cropping (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
    // Center crop 1:1 on load
    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)
            }}
          >
            Apply
          </button>
        </>
      )}
    </div>
  )
}

Fabric.js: Editor with Text and Shapes Overlay

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

    // Load background image
    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('Enter text', {
      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 for retina
    })
  }

  return (
    <div>
      <div className="flex gap-2 mb-4">
        <button onClick={addText}>Add Text</button>
        <button onClick={addRect}>Rectangle</button>
        <button onClick={() => applyFilter('grayscale')}>B/W</button>
        <button onClick={() => applyFilter('sepia')}>Sepia</button>
        <button onClick={() => {
          const dataUrl = exportImage()
          const a = document.createElement('a')
          a.href = dataUrl
          a.download = 'edited.jpg'
          a.click()
        }}>
          Download
        </button>
      </div>
      <canvas ref={canvasRef} />
    </div>
  )
}

Server-Side Image Cropping

For automatic cropping without user participation — Sharp on Node.js:

// On backend (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 — focus on faces
    })
    .webp({ quality: 85 })
    .toBuffer()
}

attention in Sharp uses saliency detection — smart crop that preserves faces and important objects in frame.

What We Do

Clarify scenario: just avatar crop — one task, marketing banner editor with text and filters — completely different. Choose library for task, implement tools UI, export to needed format (PNG/JPEG/WebP), integration with upload form and API.

Timeframe: avatar cropper — 1 day. Full Fabric.js editor — 4–6 days.