Image to line image

This tool will show the lines in your image file.

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.
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.

Create the line image Select an image file
or

Working...

Select the output colors

Dark on light

Light on dark

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 line strength.

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, to make the edges thinner. The edges we have so far can be on the thick side, because each pixel has an effect on their neighbour.
Edge thresholding to avoid creating edges due to imperfections in the input.
Related to the above, we should be skipping over remaining pixels that only provide a weak indication that we should draw an edge there. A second thresholding step, but not necessarily using the same idea. A weak edge pixel could be connected to a strong edge pixel, in which case we probably still want to use it in the final result.
Find out which image file types are supported by the canvas API and browser file upload component and limit the file upload to those.

References

The following pages were informative for implementing this: