![]() Then we'll change the input type to file, and we'll introduce concepts needed to upload an image file and display it in an HTML canvas. We'll test and understand the concepts with a prototype, reviewing the JavaScript for processing this, and any other HTML element. A simpler input type would be text input which will display a text box like the one you see here that allows the user to type text. We need a new type of input element to upload our image files but we'll start with a simple idea in this first prototype so we can concentrate on the idea rather than the details of the new HTML element. We'll start with a prototype, a web page that's a model of what we want, but is simpler to understand. You'll be able to create more web pages using these new concepts and tools as we move from a very simple page towards the more complex and creative Green Screen and MiniProject pages. We'll need some new programming concepts and JavaScript tools as we move towards creating an interactive web page for the Green Screen algorithm. After you have completed a "task" or "feature", make a GIT commit with an appropriate comment and after and regularly push your changes to Gitlab so your online repository reflects your work and you can see how it looks on the live web.In this lesson, we'll go over a few concepts that will allow you to upload image files and display them in an HTML canvas. ![]() Practice using the basic GIT workflow commands ( add, commit, and push). You are encouraged to explore JavaScript, and its effect on a page, using the Developer Tools with the debugger (to stop the page and step through the code!) and the JavaScript Console (to print results and interactively call your code!). You can even buy your own green screen so you can create your own green screen studio! ![]() The starting repository has some example images to start with but you can, of course, use your own images as well. Use this example, running version and code, as a guide for your work. Your JavaScript code should be initiated by events generated by HTML input DOM elements and use the HTML canvas DOM element (you will not need to learn its drawing API, it is just a place on your page to display the uploaded image) and the JavaScript SimpleImage class, documentation and code (which you do not need to understand or download locally to complete this project), to manipulate the individual pixels of the image. As a bonus, you can make a version that lets the user dynamically set the green threshold (and even updates the resulting image dynamically - for small images!). How high is a high green pixel value? That can differ for different green screens, but 240 is a good general estimate. ![]() That does not work in general, but it does in typical color images shot in front of a green screen. Greenness can be difficult to determine, but the easiest way is to assume that pixels with a high green pixel value represent green (regardless of its red and blue values). Of course, if you are too permissive, then you might match parts of the characters outfits making it appear like they are see through!Ī basic version of the algorithm is fairly simple: combine the pixels from two images into one image by using the "greenness" of the foreground image to determine whether or not to use the background image pixel instead in the new image. Green is the easiest color to match but you need to be a little forgiving in the amount of green you require since any real set has shadows or highlights so it is not a uniform shade of green. It works by compositing a foreground image with a background image by replacing all the "green" pixels in the foreground image with the corresponding pixel from the background image. Implement the green screen (also known as "chromakey") algorithm typically used in movies or news weather broadcasts to make the characters appear to be in a different location than they really are. This means you will not need to edit the HTML or CSS files, but you will need to understand their contents to attach your JavaScript code to the events that can be generated. Exercise: JavaScript Green Screen Image Filterįor this exercise, instead of focusing on the document's structure and style (HTML and CSS), use JavaScript to computationally change images that are uploaded to the page. ![]()
0 Comments
Leave a Reply. |