You are given an HTML file that implements a simple web-based image compositing application. The video below describes its interface.
function composite( bgImg, fgImg, fgOpac, fgPos )
This function takes 4 input parameters:
bgImgis the given background image to be modified.
fgImgis the foreground image that is to be composited onto the background image.
fgOpacis the opacity of the foreground image. The alpha values of the foreground image should be scaled using this argument.
fgPosis the position of the foreground image on the background image. It holds
ycoordinates in pixels, such that
y=0means that the top-left pixels of the foreground and background images are aligned. Note that the given
ycoordinates can be negative.
This function does not return anything. It just modifies the given background image. The foreground image may have a different size and its position can be negative. The parts of the foreground image that fall outside of the background image should be ignored.
You are given the following files to help you with this project:
compositefunction. It is included by the project1.html file. Please make sure to put them in the same directory.
composite function in the project1.js file, such that it composites the given foreground image onto the given background image with the given opacity and position arguments for the foreground image. Then, submit the completed project1.js file on canvas. Please do not rename project1.js in your submission.
Useful tip: Pressing the F4 key reloads the project1.js file without reloading the page, so you can quickly test your implementation.