Drop an image here
or click to choose · or paste (Ctrl/Cmd + V)
processed in your browser · never uploaded
Drop or click to replace
Run Canny edge detection on an image, right in your browser, to produce the same kind of edge map you feed a Stable Diffusion ControlNet (the canny preprocessor). When you want ControlNet to keep a composition, pose, or line-art shape, you first turn the source image into a canny edge map and use that as ControlNet's input. Most WebUIs include a canny preprocessor, but this tool is handy when you want to preview which lines survive while dragging the thresholds, or to prepare an edge map without launching A1111 / Forge / ComfyUI. The pipeline follows the standard Canny method: (1) convert to grayscale, (2) Gaussian blur to suppress noise, (3) a Sobel filter to compute the brightness gradient (strength and direction of change), (4) non-maximum suppression to thin edges to one pixel, and (5) two thresholds plus hysteresis (keep weak edges only when they connect to a strong edge) to decide the final lines. There are three controls. Raising blur makes the detector ignore noise and fine texture for cleaner lines (too much erases detail). The high threshold is the level above which a strong edge is always kept; the low threshold is the floor for weaker edges that are kept only if they link to a strong one. A high value 2–3× the low value is a good starting point — raise both if you get too many lines, lower them if edges break up. Tick "Black lines on white" to invert the output (the default is the white-on-black map ControlNet expects). The output matches the source pixel size (very large images are processed at up to 2048px on the long side to stay responsive) and saves as a PNG. All computation happens in your browser — the image is never sent to any server or API.
How to use
- Load an image by dropping, choosing, or pasting it (nothing is uploaded).
- Drag blur and the low / high thresholds until only the contours you want remain.
- Save the white-on-black edge map as a PNG and feed it to ControlNet (canny).
FAQ
Is my image uploaded anywhere?
No. Loading, edge detection, and PNG export all happen inside your browser. The image is never sent to any server or API — it all stays on your device.
How is this different from ControlNet's canny preprocessor?
It uses the same Canny algorithm and outputs the same white-on-black format. Use it when you want to preview the result while changing thresholds without launching a WebUI, or to prepare a pre-processed edge map. On the ControlNet side, set the preprocessor to none and feed this map directly.
How do I choose the low and high thresholds?
The high threshold is the level above which a strong edge is always kept; the low threshold is the floor for weaker edges, kept only when they connect to a strong one. A high value 2–3× the low is a good start — raise both if there are too many lines, lower them if contours break up. For noisy images, nudge blur up by 1–2 first.
Can I invert the colors?
Yes — tick "Black lines on white" to invert. ControlNet expects white lines on black (the default), so unless you have a reason to change it, save with the default.