"use client"; import * as React from "react"; import { cn } from "@kineticui/core"; export type ImageCropperHandle = { /** Renders the visible crop to a data URL. */ getCroppedImage: (opts?: { size?: number; type?: string; quality?: number }) => string | null; }; export type ImageCropperProps = { src: string; /** width / height of the crop frame. */ aspect?: number; /** Round mask for avatars. */ round?: boolean; maxZoom?: number; className?: string; }; /** Pan-and-zoom cropper: drag the image, scroll or slide to zoom, export via ref. */ export const ImageCropper = React.forwardRef(function ImageCropper({ src, aspect = 1, round, maxZoom = 3, className }, ref) { const frame = React.useRef(null); const img = React.useRef(null); const [nat, setNat] = React.useState({ w: 1, h: 1 }); const [box, setBox] = React.useState({ w: 1, h: 1 }); const [zoom, setZoom] = React.useState(1); const [pos, setPos] = React.useState({ x: 0, y: 0 }); const drag = React.useRef<{ x: number; y: number; px: number; py: number } | null>(null); React.useLayoutEffect(() => { const el = frame.current; if (!el) return; const ro = new ResizeObserver(([e]) => setBox({ w: e!.contentRect.width, h: e!.contentRect.height })); ro.observe(el); return () => ro.disconnect(); }, []); // Image scale that covers the frame at zoom 1. const base = Math.max(box.w / nat.w, box.h / nat.h); const scale = base * zoom; const clamp = (p: { x: number; y: number }, s = scale) => { const mx = Math.max(0, (nat.w * s - box.w) / 2); const my = Math.max(0, (nat.h * s - box.h) / 2); return { x: Math.max(-mx, Math.min(mx, p.x)), y: Math.max(-my, Math.min(my, p.y)) }; }; React.useImperativeHandle(ref, () => ({ getCroppedImage: ({ size = 512, type = "image/png", quality } = {}) => { const el = img.current; if (!el) return null; const canvas = document.createElement("canvas"); canvas.width = size; canvas.height = Math.round(size / aspect); const ctx = canvas.getContext("2d"); if (!ctx) return null; // Visible region in natural pixels. const sw = box.w / scale; const sh = box.h / scale; const sx = nat.w / 2 - pos.x / scale - sw / 2; const sy = nat.h / 2 - pos.y / scale - sh / 2; if (round) { ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2, Math.min(canvas.width, canvas.height) / 2, 0, Math.PI * 2); ctx.clip(); } ctx.drawImage(el, sx, sy, sw, sh, 0, 0, canvas.width, canvas.height); return canvas.toDataURL(type, quality); }, })); const setZoomClamped = (z: number) => { const nz = Math.max(1, Math.min(maxZoom, z)); setZoom(nz); setPos((p) => clamp(p, base * nz)); }; return (

{ drag.current = { x: e.clientX, y: e.clientY, px: pos.x, py: pos.y }; e.currentTarget.setPointerCapture(e.pointerId); }} onPointerMove={(e) => { const d = drag.current; if (d) setPos(clamp({ x: d.px + e.clientX - d.x, y: d.py + e.clientY - d.y })); }} onPointerUp={() => (drag.current = null)} onWheel={(e) => setZoomClamped(zoom - e.deltaY * 0.002)} tabIndex={0} aria-label="Crop area. Use arrow keys to move, plus and minus to zoom." onKeyDown={(e) => { const step = 10; if (e.key === "ArrowLeft") setPos((p) => clamp({ ...p, x: p.x + step })); if (e.key === "ArrowRight") setPos((p) => clamp({ ...p, x: p.x - step })); if (e.key === "ArrowUp") setPos((p) => clamp({ ...p, y: p.y + step })); if (e.key === "ArrowDown") setPos((p) => clamp({ ...p, y: p.y - step })); if (e.key === "+" || e.key === "=") setZoomClamped(zoom + 0.1); if (e.key === "-") setZoomClamped(zoom - 0.1); }} >

setNat({ w: e.currentTarget.naturalWidth || 1, h: e.currentTarget.naturalHeight || 1 })} className="pointer-events-none absolute left-1/2 top-1/2 max-w-none origin-center" style={{ width: nat.w * scale, height: nat.h * scale, transform: `translate(calc(-50% + ${pos.x}px), calc(-50% + ${pos.y}px))` }} /> {round ?

: null}

{Array.from({ length: 9 }, (_, i) => ( ))}

setZoomClamped(Number(e.target.value))} className="flex-1 accent-[var(--kn-accent)]" />

); });

Image Cropper

Installation

Exports