<h2><a name="setup"></a>Setup Tasks:</h2>
<p>
1. Upload yesterday's web page to your designcodebuild.com website.<br />
2. Download & setup camanjs library<br />
3. Include all the js and css files in the HTML file.<br />
</p>
<p>
Let's get started:
</p>
Download camanjs from <a href="http://camanjs.com"><strong>camanjs.com</strong></a>
<ul>
<li>Unzip it</li>
<li>Copy [camanfolder]/dist/caman.full.js to the base folder.</li>
<li>Include the necessary .js and library files in your HTML page by adding these lines inside <head></head>:</li>
</ul>
<p>
<pre><link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<<span class="pl-ent">script</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>text/javascript<span class="pl-pds">"</span></span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">"</span>http://code.jquery.com/jquery-2.1.4.min.js<span class="pl-pds">"</span></span>></<span class="pl-ent">script</span>>
<<span class="pl-ent">script</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>text/javascript<span class="pl-pds">"</span></span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">"</span>caman/caman.full.min.js<span class="pl-pds">"</span></span>></<span class="pl-ent">script</span>>
<<span class="pl-ent">script</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>text/javascript<span class="pl-pds">"</span></span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">"</span>basicCaman.js<span class="pl-pds">"</span></span>></<span class="pl-ent">script</span>></pre>
</p>
<p>We should now allow the user to add preset filters to their image. This will primarily require html and javascript
<p>Start by creating buttons for the filters you want. We will position them later.
<p>Now, enable the buttons using javascript and jQuery. Use this at the beginning of the <script>:
<code>javascript var camanObject = Caman("#toEdit");</code>
<p>Where #toEdit is the id of the image.
<p>Now, create this:
<code>javascript $( document ).ready(function() { } </code>
<p>Within this "document.ready" section, we can make the buttons respond when clicked on. Add this code within $( document ).ready, which will make the "vintage" button work.
<code>javascript $(" #vintage ").on("click", function(){ camanObject.revert(false); camanObject["vintage"](); camanObject.render(); }); // ... </code>
<p>The most important part of this code is the middle line, "camanObject'vintage';". This applies the actual filter, vintage, to the image. However, that code will change the image currently displayed. What if the user had already applied a different filter? Then it would effectively apply two filters. Instead, we need to return back to how the image originally looked.</p>
<p>This line - "camanObject.revert(false);" - does that. By specifying "false", we ask camanjs not to render immediately after reverting, because that would take extra time.</p>
<p>Finally, "camanObject.render()" makes changes to the image visible to the user.</p>
<p>Note that if the filter is two words -- like "Cross Product" -- we must use camelCase. Instead of writing camanObject["cross product"], camanJS will instead react to camanObject["crossProduct"].</p>
<p>There are two more functions we need: revert and submit. Add both of these buttons: html <button id="submit">Continue</button> <button id="back">Revert</button> The back button is easy to make work. javascript $( "#back" ).on("click", function(){ camanObject.revert(true); }); However, the submit button will be a bit more difficult. Remember, we need to go to the next page to further edit the image. We will therefore need to send some data about the image. Specifically, where the image is stored, the type of image, and the actual image data. We have multiple options: 1. Send an AJAX request 2. Save the image, and then proceed while giving the next page the file name 3. Send all required data through a post form request. We cannot send an AJAX request because it will not redirect to the new page. CamanJS also does not allow for saving the image (to my knowledge), so this leaves us with option 3. This is most easily achieved by creating a form. ```php</p>
<p>``` When this form is submitted, it will send this info to the next page (third.php) Look at ce_escape_string($filename). This is a function defined in basicCaman.php. Feel free to look there; this function just escapes all potentially dangerous characters, like slashes. These characters can interrupt data transmission through a post request.</p>
<p>Now, we must fill in the imageData input. Since we hope to send an updated image that was just processed by Camanjs, we should work on a javascript function. javascript $( "#submit" ).on("click", function(){ var imageData = camanObject.toBase64(); imageData = ceEscapeString(imageData); // escape this string, too. $( "#imageData" ).val(imageData); $( "#dataForm" ).submit(); });</p>
<p>CamanJS provides us with a function to export the image data to a base64 encoding. Now, escape the string to avoid bad characters. We then input that data into the form (so that it will be sent) and then submit the form.</p>