Tasks

Enhancement $1-$ Perform some Image Manipulation

It might be fun to utilize an NPM package such as NPM: jimp to perform some image manipulation routines on the

image. Add appropriate controls to the renderer to select some image manipulations $($such as converting to

greyscale, resizing, rotating, cropping, blurring, pixelating, etc.$)$ and have a button to trigger them. We will probably

want to keep the original image file, so make sure to save the new image as a copy with something like $"\_$modified"

appended to the file name.

Example Greyscale, Resized, & and Rotated Image

Enhancement $2-$ Add functionality to remove the EXIF information from the selected image file and save it as a new file.

As discussed in class, it is sometimes desirable to remove the EXIF information from an image file before distributing it$.$ However, we will probably want to keep the original image file with EXIF data, so make sure to save the non$-$EXIF image as a copy with something like $"\_$removed" appended to the file name. Add a button to remove the EXIF header to the renderer and look into using an NPM package such as NPM: exif$-$be$-$gone to actually do the removing.

Enhancement $3-$ Enhance the renderer to reflect when an image has been selected or not.

In many user interfaces, the presentation of the UI will depend on some external factor. In our case, that factor will be whether or not a valid image file has been selected. Add some UI functionality that will prevent the user from acting on the UI depending on whether a valid image has been selected or not. Research what JavaScript Event will trigger when we select a valid file in the file input.