Yay! the cropping widget now crops the wallpaper into multiple segments of desirable dimensions. Now, it would be cumbersome to crop high resolution, let alone multi-monitor, wallpapers in their full glory, so the wallpaper is fit inside the browser and all the overlays created are scaled down proportionately. To achieve this we could have got the wallpaper’s actual dimensions by recreating the image without applying CSS, but we already have that information in wallpaper’s filename. So the image’s dimensions & file type are extracted using regex.
For the cropping function, a canvas is created & resized to the dimensions of the screens, proportional to the size of the respective overlays. We then draw a copy of wallpaper at full resolution over the canvas at the position marked by the respective overlay.
I added buttons to resize all the overlays simultaneously preserving their aspect ratios, along with several UI tweaks. Lastly, I also completed the JavaScript track on Codecademy.
