This is a very simple Green Screen Image replacing program made on CodePen.io according to the Duke University's coursera course Programming Foundations with JavaScript, HTML and CSS.
All example images are from here.
I only use CodePen.io itself in this tiny project.
1.Download this repo,open(or zip and open).
2.You may open the src folder to check html, css and javascript source codes.
3.You may also access my CodePen to visualize and try the Green Screen Image process directly.
4.You may also build a new CodePen project on your own. Copy my source codes, paste them to relative sections and do your own custom modifications.
To use this program better, for the left image uploader, try to upload a image with green screen as background and some figures as foreground. For the right image uploader, try to upload a image which will replace the left side image's green screen.
The whole project in Unity contains four main folders, src folder, dist folder, Pictures folder and Gifs folder.
Under Assets folder, there are altogether 6 subfolders:
src folder stands for source, which means raw codes before minification or concatenation or some other compilation - used to read/edit the code.
You can check and modify html, css and javascript codes in src folder.
dist folder stands for distribution, and is the minified/concatenated version - actually used on production sites(CodePen here).
Pictures folder stands for pictures I used in this repo.
GIFs folder stands for GIFs I used in this repo.