Though, as we'll see soon, we will need to do some work to ensure that that file is an image. But if we change the input type to file we will be guaranteed that the value we get represents an actual file. The input element doesn't care if we enter a file name. Remember, this is an example of text input. So when the user clicks Upload, the alert box pops up. We use familiar JavaScript to access the value of the text input element and display that result in an alert box. Here's the JavaScript to process what the user entered. Here's that using the onclick event handler. As usual, when the user clicks the button to generate an event, we'll write JavaScript to handle that event. It's possible to process text when the user presses the Enter key, but we'll use a button since they're familiar. Here we'll use a button to process an event. As you can see in this simple page, the user has entered lion.jpg and is about to click the button. The HTML text input element allows the user to enter any text. Let's look at this prototype to understand the web page and the JavaScript. 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. 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.
0 kommentar(er)
