Implement a Javascript library to enable masking regions of an image and fetching the mask boundaries.
You will be provided with a stubbed Javascript class that defines the public API. You will also be provided with a demo.html file that uses the library. We will use this demo file to review the work.
Acceptance criteria:
General:
- Can add a new mask (newMask function)
- Can programmatically add a mask (addMask function)
- Can delete a mask by clicking a 'x' or using a hotkey
- Can get a list of the masks (getMasks function)
- Can drag masks around
- Can resize masks by dragging borders or corners of mask
- Works on IE6, IE7, IE8, FF3, Safari 4, Chrome
- Include/Exclude opacity:
- When mode==exclude, masked regions should have opacity=50%
- When mode==include, non-masked regions should have opacity=50%
Crop boundaries and image scaling:
- addMask and getMasks should accept and return coordinates based on the image's full size
- library should compensate for scaling. Example:
- paris-train.jpg image is 2304x1728
- demo.html displays the image with width=600 (26% of original size)
- if addMask(100, 100, 500, 200) is called, these should be scaled so that the box is
placed at (26, 26, 130, 52) on the scaled image.
Technical:
- No other dependencies exist besides jQuery 1.3.2
- Code does not use any global variables
- Code uses jQuery() instead of $() global