Pixpipejs

This does the following :

opening a local image file, using pixpipe.FileImageReader
converting it into a pixpipe.Image2D object
compute the dx and dy derivative with pixpipe.ImageDerivativeFilter
feed a pixpipe.GradientImageFilter with the derivative
displaying gradient direction and magnitude with a pixpipe.CanvasImageWriter

Select an image file:

The first image is the gradient direction. Note that it does not really make sens to match a [-PI/2, PI/2] interval to [0, 255].
The second image is the gradient magnitude, matched to [0, 255]