Input image
Processed image

Upload an image and set method, mask size, and strength below—the preview updates automatically.

Edge detection options

Pick an operator and convolution mask, then tune strength. Output is a grayscale edge map— bright pixels mark detected borders.

Method

Size of the convolution mask

Strength

Edge detection online

Detect edges in images online: Roberts, Sobel, or Laplacian operators, 3×3 or 5×5 mask, strength slider, live preview, PNG download in browser.

What is image edge detection?

Image edge detection finds boundaries where brightness or color changes sharply—outlines of objects, text strokes, and texture transitions. This page convolves a grayscale version of your photo with Roberts cross, Sobel-Feldman, or Laplacian kernels, then scales the gradient magnitude by strength to produce a bright-on-dark edge map. Mask size controls how far apart samples are: 3×3 for fine lines, 5×5 for smoother, wider edges. Upload, tune options, preview beside the original, and download PNG—all in your browser.

Edge detection features

Convolution-based border detection in the browser.

  1. Three operators: Roberts cross, Sobel-Feldman, and Laplacian edge filters.
  2. Mask size choice: 3×3 for fine detail or 5×5 for broader edge lines.
  3. Strength slider: Scale gradient magnitude from subtle outlines to bold borders.
  4. Automatic preview: Output refreshes as you change method, mask, or strength.
  5. Side-by-side panels: Compare the original photo and edge map before download.
  6. PNG download: Save as image-edge-detection.png.

How to find edges in a photo

Steps for online image edge detection.

  1. Upload your image: Drop or click in the input panel (15 MB max).
  2. Pick a detection method: Try Sobel first; switch to Roberts for thin lines or Laplacian for fine change.
  3. Set mask and strength: Use 3×3 for crisp detail; raise strength until edges read clearly.
  4. Download PNG: Save the edge map for tracing, compositing, or further editing.

Tips for edge maps

Cleaner borders and less noise.

  1. Start with Sobel: Sobel-Feldman is a reliable default for most photos.
  2. Reduce noise first: Grainy sources amplify speckle—try /blur-image lightly if needed.
  3. Use Roberts for thin lines: Roberts cross works well on high-contrast logos and sketches.
  4. Watch Laplacian noise: Laplacian is sensitive; lower strength on smooth gradients.
  5. Try 5×5 on small images: Wider sampling can reduce jagged edges on low-res uploads.
  6. Export PNG for overlays: Multiply or screen the edge map in your editor for stylized looks.

When to use edge detection

Typical uses for image border finders.

  1. Line art extraction: Generate outlines from photos before manual tracing or vector work.
  2. Vision prototyping: Preview how gradient operators respond to shapes and textures.
  3. Photo analysis demos: Compare Roberts, Sobel, and Laplacian on the same source image.
  4. Compositing masks: Use high-contrast edge maps as starting points for selections.
  5. Technical illustrations: Highlight object boundaries for diagrams or documentation.
  6. Pre-sharpen checks: See where contrast concentrates before using /sharpen-image.

Why use this edge detector

Benefits of browser-based edge detection.

  1. Operator choice: Match the filter to your subject without installing OpenCV.
  2. Private: Images stay on your device—no server upload.
  3. Live tuning: Adjust strength and mask size with instant feedback.
  4. Free: Unlimited previews and downloads.
  5. No install: Works in any modern browser with Canvas 2D.
  6. Alpha preserved: Transparency on PNG uploads is kept in the output.

Technical details

How convolution edge detection works here.

  1. Roberts cross: Diagonal 2×2 gradients; step 2 when 5×5 mask is selected.
  2. Sobel-Feldman: Standard 3×3 Gx/Gy kernels; magnitude = hypot(gx, gy).
  3. Laplacian: 4-center minus cross neighbors; absolute response.
  4. Strength scaling: Gradient magnitude × (strength / 100) × 2.5, clamped 0–255.
  5. Input limits: 15 MB; longest edge 8192 px.
  6. Rendering: Canvas 2D getImageData / putImageData; grayscale RGB output.

Frequently Asked Questions

Have questions? We have answers.

More tools from Image & Conversion.