{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "image-cropper", "type": "registry:ui", "title": "Image cropper", "description": "Left edge in source pixels, measured on the image after `rotation`.", "dependencies": [ "lucide-react", "motion" ], "registryDependencies": [ "https://ui.minidev.pro/r/button.json", "https://ui.minidev.pro/r/segmented-control.json", "https://ui.minidev.pro/r/slider.json", "utils" ], "files": [ { "path": "registry/ui/image-cropper.tsx", "type": "registry:ui", "target": "components/ui/image-cropper.tsx", "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { CircleIcon, DownloadIcon, RotateCwIcon, ZoomInIcon, ZoomOutIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { SegmentedControl } from \"@/components/ui/segmented-control\"\nimport { Slider } from \"@/components/ui/slider\"\n\nconst SNAPPY = { type: \"spring\", bounce: 0.18, duration: 0.42 } as const\nconst MORPH = { type: \"spring\", bounce: 0.16, duration: 0.5 } as const\nconst RELEASE = { type: \"spring\", stiffness: 400, damping: 40 } as const\nconst ELASTIC = 0.12\n\ntype CropRect = {\n /** Left edge in source pixels, measured on the image after `rotation`. */\n x: number\n y: number\n width: number\n height: number\n /** Clockwise rotation in degrees: 0, 90, 180 or 270. */\n rotation: number\n}\n\ntype CropOptions = {\n rotation?: number\n /** Clip to an ellipse (a circle for square crops). Use a PNG or WebP type to keep the corners transparent. */\n circle?: boolean\n /** Output width in pixels. Height follows the crop's aspect. Defaults to the crop's own width. */\n width?: number\n type?: string\n quality?: number\n}\n\nfunction loadImage(src: string) {\n return new Promise((resolve, reject) => {\n const img = new Image()\n if (!src.startsWith(\"data:\") && !src.startsWith(\"blob:\")) img.crossOrigin = \"anonymous\"\n img.onload = () => resolve(img)\n img.onerror = () => reject(new Error(\"Could not load the image\"))\n img.src = src\n })\n}\n\n/**\n * Renders a crop rectangle (as returned by ImageCropper's onCrop) to a Blob\n * with a canvas. Remote images need CORS headers or the canvas is tainted.\n */\nasync function getCroppedBlob(src: string | HTMLImageElement, rect: CropRect, opts: CropOptions = {}): Promise {\n const img = typeof src === \"string\" ? await loadImage(src) : src\n const rotation = (((opts.rotation ?? rect.rotation ?? 0) % 360) + 360) % 360\n const nw = img.naturalWidth\n const nh = img.naturalHeight\n const ew = rotation % 180 ? nh : nw\n const eh = rotation % 180 ? nw : nh\n const k = (opts.width ?? rect.width) / rect.width\n const canvas = document.createElement(\"canvas\")\n canvas.width = Math.max(1, Math.round(rect.width * k))\n canvas.height = Math.max(1, Math.round(rect.height * k))\n const ctx = canvas.getContext(\"2d\")\n if (!ctx) throw new Error(\"Canvas 2D is not available\")\n ctx.imageSmoothingQuality = \"high\"\n if (opts.circle) {\n ctx.beginPath()\n ctx.ellipse(canvas.width / 2, canvas.height / 2, canvas.width / 2, canvas.height / 2, 0, 0, Math.PI * 2)\n ctx.clip()\n }\n ctx.scale(k, k)\n ctx.translate(-rect.x, -rect.y)\n ctx.translate(ew / 2, eh / 2)\n ctx.rotate((rotation * Math.PI) / 180)\n ctx.drawImage(img, -nw / 2, -nh / 2, nw, nh)\n const type = opts.type ?? \"image/png\"\n return new Promise((resolve, reject) => canvas.toBlob((b) => (b ? resolve(b) : reject(new Error(\"Export failed\"))), type, opts.quality ?? 0.92))\n}\n\nconst SAMPLE_SVG = `\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n`\n\nconst SAMPLE_SRC = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(SAMPLE_SVG)}`\n\ntype Aspect = \"1:1\" | \"4:3\" | \"16:9\" | \"3:2\" | \"4:5\" | \"9:16\"\n\nconst ratio = (a: string) => {\n const [w, h] = a.split(\":\").map(Number)\n return w > 0 && h > 0 ? w / h : 1\n}\nconst even = (n: number) => Math.max(2, Math.round(n / 2) * 2)\nconst clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n))\n\ntype View = { fx: number; fy: number; zoom: number; rot: number }\ntype Mode = \"instant\" | \"snappy\" | \"morph\" | \"release\"\n\n/**\n * Crop an image inside a frame: drag to pan, zoom with the slider, the wheel\n * or a pinch, switch between aspect presets, mask to a circle for avatars and\n * rotate in 90 degree steps. The image rubber-bands at the frame edges and\n * settles back on release. Keyboard: arrows pan (Shift for bigger steps),\n * + and - zoom, R rotates. onCrop returns the crop rectangle in source pixels,\n * and the exported getCroppedBlob(src, rect, opts) renders it with a canvas.\n */\ntype ImageCropperProps = {\n /** Image URL or data URI. Remote images need CORS headers for getCroppedBlob. */\n src?: string\n alt?: string\n /** Aspect presets offered, as \"w:h\". */\n aspects?: Aspect[]\n defaultAspect?: Aspect\n /** Start with the circular avatar mask on. */\n defaultCircle?: boolean\n /** Offer the circular mask toggle. */\n allowCircle?: boolean\n /** Largest zoom, as a multiple of the size that just covers the frame. */\n maxZoom?: number\n /** Show the live preview and crop details beside the frame. */\n showPreview?: boolean\n /** Called with the crop in source pixels once an interaction settles. */\n onCrop?: (rect: CropRect, info: { aspect: Aspect; circle: boolean }) => void\n /** File name used by the export button. */\n fileName?: string\n className?: string\n}\n\nfunction ImageCropper({\n src = SAMPLE_SRC,\n alt = \"Lumen sample landscape\",\n aspects = [\"1:1\", \"4:3\", \"16:9\"],\n defaultAspect = \"4:3\",\n defaultCircle = false,\n allowCircle = true,\n maxZoom = 4,\n showPreview = true,\n onCrop,\n fileName = \"lumen-cover.png\",\n className,\n}: ImageCropperProps) {\n const reduce = useReducedMotion()\n const uid = React.useId()\n const stageRef = React.useRef(null)\n const [stageW, setStageW] = React.useState(0)\n const [natural, setNatural] = React.useState<{ w: number; h: number } | null>(null)\n const [aspect, setAspect] = React.useState(defaultAspect)\n const [circle, setCircle] = React.useState(defaultCircle)\n const [view, setViewState] = React.useState({ fx: 0.5, fy: 0.5, zoom: 1, rot: 0 })\n const [mode, setMode] = React.useState(\"snappy\")\n const [active, setActive] = React.useState(false)\n const [busy, setBusy] = React.useState(false)\n const viewRef = React.useRef(view)\n viewRef.current = view\n\n React.useEffect(() => {\n const el = stageRef.current\n if (!el) return\n const ro = new ResizeObserver(([e]) => setStageW(Math.round(e.contentRect.width)))\n ro.observe(el)\n return () => ro.disconnect()\n }, [])\n\n React.useEffect(() => {\n let alive = true\n setNatural(null)\n setViewState({ fx: 0.5, fy: 0.5, zoom: 1, rot: 0 })\n loadImage(src)\n .then((img) => alive && setNatural({ w: img.naturalWidth || 1, h: img.naturalHeight || 1 }))\n .catch(() => alive && setNatural(null))\n return () => {\n alive = false\n }\n }, [src])\n\n const effAspect: Aspect = circle ? \"1:1\" : aspect\n const a = ratio(effAspect)\n const stageH = stageW ? even(clamp(stageW * 0.66, 240, 380)) : 0\n const pad = stageW < 360 ? 16 : 24\n const cw = stageW ? even(Math.min(stageW - pad * 2, (stageH - pad * 2) * a)) : 0\n const ch = stageW ? even(cw / a) : 0\n\n const turned = (((view.rot % 360) + 360) % 360) % 180 !== 0\n const ew = natural ? (turned ? natural.h : natural.w) : 1\n const eh = natural ? (turned ? natural.w : natural.h) : 1\n const base = cw && natural ? Math.max(cw / ew, ch / eh) : 1\n const geo = React.useRef({ ew, eh, base, cw, ch })\n geo.current = { ew, eh, base, cw, ch }\n\n // Keep the point under the frame centre inside the bounds that let the image cover the frame.\n const bound = React.useCallback((v: View, elastic = false): View => {\n const { ew, eh, base, cw, ch } = geo.current\n const s = base * v.zoom\n const hx = Math.min(0.5, cw / (2 * ew * s))\n const hy = Math.min(0.5, ch / (2 * eh * s))\n const fit = (f: number, h: number) => {\n const c = clamp(f, h, 1 - h)\n return elastic ? c + (f - c) * ELASTIC : c\n }\n return { ...v, fx: fit(v.fx, hx), fy: fit(v.fy, hy) }\n }, [])\n\n const setView = React.useCallback(\n (next: View, m: Mode, elastic = false) => {\n setMode(m)\n setViewState(bound(next, elastic))\n },\n [bound]\n )\n\n // Re-clamp when the frame or image geometry changes (aspect, mask, resize, rotation).\n React.useEffect(() => {\n setViewState((v) => bound(v))\n }, [cw, ch, ew, eh, bound])\n\n const zoomAt = React.useCallback(\n (zoom: number, px: number, py: number, m: Mode) => {\n const v = viewRef.current\n const { ew, eh, base } = geo.current\n const z = clamp(zoom, 1, maxZoom)\n const s0 = base * v.zoom\n const s1 = base * z\n const fx = v.fx + px / (ew * s0) - px / (ew * s1)\n const fy = v.fy + py / (eh * s0) - py / (eh * s1)\n setView({ ...v, zoom: z, fx, fy }, m)\n },\n [maxZoom, setView]\n )\n\n // Wheel zoom needs a non-passive listener to keep the page from scrolling.\n React.useEffect(() => {\n const el = stageRef.current\n if (!el) return\n const onWheel = (e: WheelEvent) => {\n if (!natural) return\n e.preventDefault()\n const r = el.getBoundingClientRect()\n const factor = Math.exp(-e.deltaY * (e.deltaMode === 1 ? 0.05 : 0.0018))\n zoomAt(viewRef.current.zoom * factor, e.clientX - r.left - r.width / 2, e.clientY - r.top - r.height / 2, \"instant\")\n }\n el.addEventListener(\"wheel\", onWheel, { passive: false })\n return () => el.removeEventListener(\"wheel\", onWheel)\n }, [natural, zoomAt])\n\n const pointers = React.useRef(new Map())\n const gesture = React.useRef<{ x: number; y: number; view: View; dist: number } | null>(null)\n\n const startGesture = () => {\n const pts = [...pointers.current.values()]\n if (!pts.length) {\n gesture.current = null\n return\n }\n const cx = pts.reduce((s, p) => s + p.x, 0) / pts.length\n const cy = pts.reduce((s, p) => s + p.y, 0) / pts.length\n const dist = pts.length > 1 ? Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y) : 0\n gesture.current = { x: cx, y: cy, view: viewRef.current, dist }\n }\n\n const onPointerDown = (e: React.PointerEvent) => {\n if (!natural || (e.pointerType === \"mouse\" && e.button !== 0)) return\n e.currentTarget.setPointerCapture(e.pointerId)\n pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY })\n startGesture()\n setActive(true)\n }\n\n const onPointerMove = (e: React.PointerEvent) => {\n if (!pointers.current.has(e.pointerId) || !gesture.current) return\n pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY })\n const g = gesture.current\n const pts = [...pointers.current.values()]\n const cx = pts.reduce((s, p) => s + p.x, 0) / pts.length\n const cy = pts.reduce((s, p) => s + p.y, 0) / pts.length\n const { ew, eh, base } = geo.current\n let zoom = g.view.zoom\n if (pts.length > 1 && g.dist > 0) {\n zoom = clamp(g.view.zoom * (Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y) / g.dist), 1, maxZoom)\n }\n const r = e.currentTarget.getBoundingClientRect()\n const px = g.x - r.left - r.width / 2\n const py = g.y - r.top - r.height / 2\n const s0 = base * g.view.zoom\n const s1 = base * zoom\n // Keep the image point that was under the gesture centre under it, then follow the centre.\n const fx = g.view.fx + px / (ew * s0) - px / (ew * s1) - (cx - g.x) / (ew * s1)\n const fy = g.view.fy + py / (eh * s0) - py / (eh * s1) - (cy - g.y) / (eh * s1)\n setView({ ...g.view, zoom, fx, fy }, \"instant\", true)\n }\n\n const onPointerUp = (e: React.PointerEvent) => {\n if (!pointers.current.delete(e.pointerId)) return\n if (pointers.current.size) {\n startGesture()\n return\n }\n gesture.current = null\n setActive(false)\n setView(viewRef.current, \"release\")\n }\n\n const rotate = () => {\n const v = viewRef.current\n // The point under the centre turns with the image.\n setMode(\"morph\")\n setViewState({ ...v, rot: v.rot + 90, fx: 1 - v.fy, fy: v.fx })\n }\n\n const reset = () => setView({ fx: 0.5, fy: 0.5, zoom: 1, rot: 0 }, \"morph\")\n\n const onKeyDown = (e: React.KeyboardEvent) => {\n const v = viewRef.current\n const { ew, eh, base } = geo.current\n const s = base * v.zoom\n const step = e.shiftKey ? 48 : 12\n const pan = (dx: number, dy: number) => setView({ ...v, fx: v.fx - dx / (ew * s), fy: v.fy - dy / (eh * s) }, \"snappy\")\n switch (e.key) {\n case \"ArrowLeft\":\n pan(-step, 0)\n break\n case \"ArrowRight\":\n pan(step, 0)\n break\n case \"ArrowUp\":\n pan(0, -step)\n break\n case \"ArrowDown\":\n pan(0, step)\n break\n case \"+\":\n case \"=\":\n zoomAt(v.zoom + 0.2, 0, 0, \"snappy\")\n break\n case \"-\":\n case \"_\":\n zoomAt(v.zoom - 0.2, 0, 0, \"snappy\")\n break\n case \"r\":\n case \"R\":\n rotate()\n break\n case \"0\":\n reset()\n break\n default:\n return\n }\n e.preventDefault()\n }\n\n const s = base * view.zoom\n const ox = (0.5 - view.fx) * ew * s\n const oy = (0.5 - view.fy) * eh * s\n const rect: CropRect | null = natural && cw\n ? (() => {\n const w = Math.min(ew, Math.round(cw / s))\n const h = Math.min(eh, Math.round(ch / s))\n return {\n x: clamp(Math.round(view.fx * ew - w / 2), 0, ew - w),\n y: clamp(Math.round(view.fy * eh - h / 2), 0, eh - h),\n width: w,\n height: h,\n rotation: (((view.rot % 360) + 360) % 360),\n }\n })()\n : null\n\n const latest = React.useRef(onCrop)\n latest.current = onCrop\n const key = rect ? `${rect.x},${rect.y},${rect.width},${rect.height},${rect.rotation},${circle},${effAspect}` : \"\"\n const [settled, setSettled] = React.useState(null)\n React.useEffect(() => {\n if (!rect || active) return\n const t = window.setTimeout(() => {\n setSettled(rect)\n latest.current?.(rect, { aspect: effAspect, circle })\n }, 160)\n return () => window.clearTimeout(t)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [key, active])\n\n const tr =\n reduce || mode === \"instant\" ? { duration: 0 } : mode === \"release\" ? RELEASE : mode === \"morph\" ? MORPH : SNAPPY\n const frameTr = reduce ? { duration: 0 } : MORPH\n\n const previewW = 112\n const pw = a >= 1 ? previewW : even(previewW * a)\n const ph = even(pw / a)\n const k = cw ? pw / cw : 0\n\n const imgStyle = natural\n ? { width: natural.w, height: natural.h, marginLeft: -natural.w / 2, marginTop: -natural.h / 2 }\n : undefined\n\n const exportPng = async () => {\n if (!rect) return\n setBusy(true)\n try {\n const blob = await getCroppedBlob(src, rect, { circle, type: \"image/png\" })\n const url = URL.createObjectURL(blob)\n const link = document.createElement(\"a\")\n link.href = url\n link.download = fileName\n link.click()\n window.setTimeout(() => URL.revokeObjectURL(url), 1000)\n } finally {\n setBusy(false)\n }\n }\n\n const aspectOptions = aspects.map((x) => ({ value: x, label: x, disabled: circle && x !== \"1:1\" }))\n\n return (\n
\n
\n \n {natural && cw ? (\n <>\n \n \n \n \n \n \n \n \n \n \n ) : (\n Loading image\n )}\n
\n

\n Drag, or use the arrow keys, to move the image. Scroll, pinch, or press plus and minus to zoom. Press R to rotate and 0 to reset.\n

\n\n
\n {\n setMode(\"morph\")\n setAspect(v as Aspect)\n }}\n />\n {allowCircle ? (\n {\n setMode(\"morph\")\n setCircle((c) => !c)\n }}\n className=\"aria-pressed:border-accent-line aria-pressed:bg-accent-soft aria-pressed:text-accent-fg aria-pressed:[&_svg]:text-accent-fg\"\n >\n \n Circle\n \n ) : null}\n \n
\n\n
\n \n `${Math.round(n * 100)}%`}\n onValueChange={(n) => zoomAt(Array.isArray(n) ? n[0] : (n as number), 0, 0, \"instant\")}\n className=\"min-w-0 flex-1\"\n />\n \n {Math.round(view.zoom * 100)}%\n
\n
\n\n {showPreview ? (\n
\n
\n Preview\n
\n \n {natural && cw ? (\n \n ) : null}\n \n
\n
\n
\n
\n
Size
\n
{settled ? `${settled.width} × ${settled.height}` : \"–\"}
\n
Origin
\n
{settled ? `${settled.x}, ${settled.y}` : \"–\"}
\n
Turn
\n
{settled ? `${settled.rotation}°` : \"–\"}
\n
\n \n
\n
\n ) : null}\n \n )\n}\n\nexport { ImageCropper, getCroppedBlob }\nexport type { ImageCropperProps, CropRect, CropOptions }\n" } ] }