Let's start off, as usual, by copying the application template we created in Chapter 1, The Task at Hand, and renaming the filenames to photoPad.html, photoPad.css, and photoPad.js. In the HTML file, we will add a toolbar with buttons for Load, Save, and Effects. You can find the code for this section in Chapter 5/example5.2:
<body>
<div id="app">
<header>Photo Pad </header>
<div id="main">
<div id="toolbar">
<div class="dropdown-menu">
<button data-action="menu">Load</button>
<ul id="load-menu" data-option="file-picker"
class="file-picker menu">
<li data-value="file-picker">
<input type="file" />
</li>
</ul>
</div>
<button data-action="save">Save</button>
<div class="dropdown-menu">
<button data-action="menu">Effects</button>
<ul data-option="applyEffect" class="menu">
<li data-value="invert">Invert</li>
</ul>
</div>
</div>
<canvas width="0" height="0">
Sorry, your browser doesn't support canvas.
</canvas>
</div>
<footer>Click load to choose a file</footer>
</div>
</body>The Load toolbar item has a drop-down menu, but instead of menu items it has a file input control in it where the user can select a file to load. The Effects item has a drop-down menu of effects. For now we just have one in there, Invert, but we will add more later.
For our CSS we will copy everything we had in canvasPad.css to photoPad.css, so that we get all of the same styling for the toolbar and menus. We will also use the Toolbar object in toolbar.js.
In our JavaScript file we will change the application object name to PhotoPadApp. We also need a couple of variables in PhotoPadApp. We will set the canvas variable to the <canvas> element, the context variable to the canvas's context, and define an $img variable to hold the image we will be showing. Here we initialize it to a new <img> element using jQuery:
function PhotoPadApp()
{
var version = "5.2",
canvas = $("#main>canvas")[0],
context = canvas.getContext("2d"),
$img = $("<img>");The first toolbar action we will implement is the Save button, since we already have that code from Canvas Pad. We check the action in toolbarButtonClicked() to see if it's "save", and if so we get the data URL and open it in a new browser window:
function toolbarButtonClicked(action)
{
switch (action)
{
case "save":
var url = canvas.toDataURL();
window.open(url, "PhotoPadImage");
break;
}
}We created the scaffolding for the Photo Pad application with toolbar items for Load, Save, and Effects. We implemented the save function the same as we did for Canvas Pad.
The next thing we'll implement is the Load drop-down menu since we need an image to manipulate. When the Load toolbar button is clicked, it will show the drop-down menu with a file input control in it that we defined previously. All of that we get for free because it's just another drop-down menu in our toolbar.
But before we can do that we need to learn about the HTML5 File API.