2e:null 2f:["$","title",null,{"children":"Cropper | Michael Bricknell | Observable"}] 34:T2759,viewof cropper = { const wrap = html`

Upload an image to begin

`; const fileInput = wrap.querySelector("#fileInput"); const imgEl = wrap.querySelector("#imgEl"); const overlay = wrap.querySelector("#overlay"); const cropWrap = wrap.querySelector("#cropWrap"); const dimsEl = wrap.querySelector("#dims"); const placeholder = wrap.querySelector("#placeholder"); const invertBtn = wrap.querySelector("#invertBtn"); let imgW = 0, imgH = 0, imgOffX = 0, imgOffY = 0, scaleX = 1, scaleY = 1; let box = { x1: 0, y1: 0, x2: 0, y2: 0 }; let lockedRatio = 0; let initialized = false; let lastWrapW = 0; const r = 7, minSize = 20; wrap.value = null; fileInput.addEventListener("change", (e) => { const file = e.target.files[0]; if (!file) return; const url = URL.createObjectURL(file); imgEl.onload = () => { imgEl.style.display = "block"; placeholder.style.display = "none"; overlay.style.display = "block"; initialized = false; setTimeout(initCrop, 50); }; imgEl.src = url; }); wrap.querySelectorAll(".ratio-btn").forEach((btn) => { btn.addEventListener("click", () => { wrap .querySelectorAll(".ratio-btn") .forEach((b) => (b.style.fontWeight = "400")); btn.style.fontWeight = "600"; lockedRatio = +btn.dataset.ratio; invertBtn.disabled = lockedRatio === 0; invertBtn.style.opacity = lockedRatio === 0 ? "0.4" : "1"; if (lockedRatio && box.x2 > 0) { box.y2 = box.y1 + (box.x2 - box.x1) / lockedRatio; render(); } }); }); invertBtn.addEventListener("click", () => { lockedRatio = 1 / lockedRatio; if (box.x2 > 0) { box.y2 = box.y1 + (box.x2 - box.x1) / lockedRatio; render(); } }); function getImgRect() { const r = imgEl.getBoundingClientRect(); const w = cropWrap.getBoundingClientRect(); return { x: r.left - w.left, y: r.top - w.top, w: r.width, h: r.height }; } function initCrop() { if (initialized) return; initialized = true; const ir = getImgRect(); imgOffX = ir.x; imgOffY = ir.y; imgW = ir.w; imgH = ir.h; lastWrapW = cropWrap.getBoundingClientRect().width; scaleX = imgEl.naturalWidth / imgW; scaleY = imgEl.naturalHeight / imgH; const pad = Math.min(imgW, imgH) * 0.1; box = { x1: imgOffX + pad, y1: imgOffY + pad, x2: imgOffX + imgW - pad, y2: imgOffY + imgH - pad }; render(); } function clamp(val, mn, mx) { return Math.max(mn, Math.min(mx, val)); } function render() { const { x1, y1, x2, y2 } = box; const cx = (x1 + x2) / 2, cy = (y1 + y2) / 2; const W = x2 - x1, H = y2 - y1; const cw = Math.round(W * scaleX); const ch = Math.round(H * scaleY); dimsEl.textContent = `${cw} × ${ch} px`; overlay.innerHTML = ` ${anchors(x1, y1, x2, y2, cx, cy)} `; addDrag(); wrap.value = { x: Math.round((x1 - imgOffX) * scaleX), y: Math.round((y1 - imgOffY) * scaleY), width: cw, height: ch, img: imgEl }; wrap.dispatchEvent(new Event("input")); } function anchors(x1, y1, x2, y2, cx, cy) { const pts = [ { id: "nw", x: x1, y: y1 }, { id: "n", x: cx, y: y1 }, { id: "ne", x: x2, y: y1 }, { id: "e", x: x2, y: cy }, { id: "se", x: x2, y: y2 }, { id: "s", x: cx, y: y2 }, { id: "sw", x: x1, y: y2 }, { id: "w", x: x1, y: cy }, { id: "c", x: cx, y: cy } ]; const cursors = { nw: "nw-resize", n: "n-resize", ne: "ne-resize", e: "e-resize", se: "se-resize", s: "s-resize", sw: "sw-resize", w: "w-resize", c: "move" }; return pts .map( (p) => `` ) .join(""); } function addDrag() { overlay.querySelectorAll(".anchor").forEach((el) => { el.addEventListener("mousedown", (e) => { e.preventDefault(); // refresh offsets in case layout shifted const ir = getImgRect(); imgOffX = ir.x; imgOffY = ir.y; imgW = ir.w; imgH = ir.h; const id = e.target.dataset.id; const startBox = { ...box }; const startPt = { x: e.clientX, y: e.clientY }; const onMove = (e) => applyDrag(e.clientX - startPt.x, e.clientY - startPt.y, startBox, id); const onUp = () => { document.removeEventListener("mousemove", onMove); document.removeEventListener("mouseup", onUp); }; document.addEventListener("mousemove", onMove); document.addEventListener("mouseup", onUp); }); }); } function applyDrag(dx, dy, b, id) { const L = imgOffX, R = imgOffX + imgW, T = imgOffY, B = imgOffY + imgH; switch (id) { case "nw": box.x1 = clamp(b.x1 + dx, L, b.x2 - minSize); box.y1 = clamp(b.y1 + dy, T, b.y2 - minSize); break; case "n": box.y1 = clamp(b.y1 + dy, T, b.y2 - minSize); break; case "ne": box.x2 = clamp(b.x2 + dx, b.x1 + minSize, R); box.y1 = clamp(b.y1 + dy, T, b.y2 - minSize); break; case "e": box.x2 = clamp(b.x2 + dx, b.x1 + minSize, R); break; case "se": box.x2 = clamp(b.x2 + dx, b.x1 + minSize, R); box.y2 = clamp(b.y2 + dy, b.y1 + minSize, B); break; case "s": box.y2 = clamp(b.y2 + dy, b.y1 + minSize, B); break; case "sw": box.x1 = clamp(b.x1 + dx, L, b.x2 - minSize); box.y2 = clamp(b.y2 + dy, b.y1 + minSize, B); break; case "w": box.x1 = clamp(b.x1 + dx, L, b.x2 - minSize); break; case "c": const w = b.x2 - b.x1, h = b.y2 - b.y1; const nx1 = clamp(b.x1 + dx, L, R - w), ny1 = clamp(b.y1 + dy, T, B - h); box.x1 = nx1; box.y1 = ny1; box.x2 = nx1 + w; box.y2 = ny1 + h; break; } if (lockedRatio) { switch (id) { case "nw": case "sw": case "w": box.x1 = box.x2 - (box.y2 - box.y1) * lockedRatio; break; case "n": box.y1 = box.y2 - (box.x2 - box.x1) / lockedRatio; break; case "ne": case "e": box.x2 = box.x1 + (box.y2 - box.y1) * lockedRatio; break; case "s": case "se": box.y2 = box.y1 + (box.x2 - box.x1) / lockedRatio; break; } } render(); } const onResize = () => { if (imgEl.style.display === "none") return; const newW = cropWrap.getBoundingClientRect().width; if (Math.abs(newW - lastWrapW) < 2) return; lastWrapW = newW; initialized = false; initCrop(); }; window.addEventListener("resize", onResize); invalidation.then(() => window.removeEventListener("resize", onResize)); wrap.setPreset = (p) => { const ir = getImgRect(); imgOffX = ir.x; imgOffY = ir.y; imgW = ir.w; imgH = ir.h; scaleX = imgEl.naturalWidth / imgW; scaleY = imgEl.naturalHeight / imgH; box.x1 = imgOffX + p.x / scaleX; box.y1 = imgOffY + p.y / scaleY; box.x2 = imgOffX + (p.x + p.width) / scaleX; box.y2 = imgOffY + (p.y + p.height) / scaleY; render(); }; return wrap; }35:[] 32:{"id":"848f09a30ea13b29","slug":"cropper","title":"Cropper","thumbnail":"a25b7162143a78c47a1aeb3a70ffa04a779b1d6e177f3dcdcf7897340131a137","access_level":"public","create_time":"$D2026-03-30T12:24:53.108Z","update_time":"$D2026-04-27T12:39:37.511Z","view_time":null,"first_public_time":"$D2026-04-27T12:38:35.238Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024"},"version":100,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null}],"members":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null,"role":"editor"},{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"2f71d064e45acb0b","slug":"carto","title":"Carto","owner":{"id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell"}},"type":"notebook","body":{"title":"Cropper","cells":[{"id":0,"value":"# Cropper","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"Crop an image based on a ratio or free-form bounding box.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"viewof preset = Inputs.select([null, ...presets], {\n value: null,\n format: (p) => (p ? p.name : \"— use crop box —\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"JSON.stringify(\n cropper.value && {\n x: cropper.value.x,\n y: cropper.value.y,\n width: cropper.value.width,\n height: cropper.value.height\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"cropper.value","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"cropBtn = Inputs.button(\"Crop\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"presets = {\n const img = viewof cropper.querySelector(\"img\");\n if (!img || !img.naturalWidth) return [];\n const w = img.naturalWidth,\n h = img.naturalHeight;\n return [\n { name: \"1:1\", x: 0, y: 0, width: Math.min(w, h), height: Math.min(w, h) },\n { name: \"4:3\", x: 0, y: 0, width: w, height: Math.round((w * 3) / 4) },\n { name: \"3:4\", x: 0, y: 0, width: w, height: Math.round((w * 4) / 3) },\n { name: \"16:9\", x: 0, y: 0, width: w, height: Math.round((w * 9) / 16) },\n { name: \"9:16\", x: 0, y: 0, width: w, height: Math.round((w * 16) / 9) },\n {\n name: \"680:900\",\n x: 0,\n y: 0,\n width: w,\n height: Math.round((w * 900) / 680)\n }\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"cropped = {\n cropBtn;\n const p = preset ?? cropper;\n if (!p)\n return html`Set a crop first`;\n const img = viewof cropper.querySelector(\"img\");\n const { x, y, width, height } = p;\n const canvas = document.createElement(\"canvas\");\n canvas.width = width;\n canvas.height = height;\n canvas\n .getContext(\"2d\")\n .drawImage(img, x, y, width, height, 0, 0, width, height);\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"{\n if (preset) viewof cropper.setPreset(preset);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"