Image to line image

This tool will show the lines in your image file.

Try different settings to get better results.
Processing happens on your own device; the image is not sent anywhere.
Note that the high contrast areas in images will give the best results.
Larger files will take more time.
The output can be saved like a file from the internet: use right-click and "save image" on a computer or a long press and "save image" on a mobile device.
Click or tap an image to zoom in.
This will work best on a computer. Mobile devices don't like it when a page uses many resources, and may throw away your results.

Load an input image Select an image file, PNG or JPG

Adjust these settings to see more lines or fewer lines

Most sensitive (see all lines)

Custom sensitivity
A lower value will result in more lines. The slider represents a minimum edge strength.

Working...

Select the output colors

Dark on light

Light on dark

Select the line strength

Lines are stronger when the edge in the original image is stronger

Every line has the same strength (note: this uses the "custom sensitivity" slider)

Automatically make some lines thinner. Note that this setting has no effect if the setting "Every line has the same strength" is on.

This tool is a work in progress.

TODOs

I have mostly been following the Canny edge detector Wikipedia page and trying to remember this topic from my university studies. The following are some possible additions or areas open to improvement:

Gradient magnitude thresholding, using the gradient direction. This is to make the edges thinner. This has already been implemented but the effect does not seem to be good enough yet.
Add both double thresholding and hysteresis thresholding. The Canny edge detector wiki page mentions this, and alternative explanations can be found here and here.
Maybe it is nice if the previous settings are remembered the next time the tool is opened. But perhaps it doesn't make much sense; the sensitivity settings will usually need to be adjusted for each image.
Add a button to the introduction to show an example image with settings that I have optimized beforehand. Or just show the before and after image.

References

The following pages were informative for implementing this:

Show the result of intermediate steps, where possible.

Assume the input image has a non-linear color space, and convert that to a linear color space before processing.