Crop Complete

Multi-monitor download

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.

Cropped Wallpaper (left)

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.

Cropped Wallpaper (right)

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s