1. Upload yesterday's web page to your designcodebuild.com website.
2. Download & setup camanjs library
3. Include all the js and css files in the HTML file.
Let's get started:Download camanjs from camanjs.com
- Unzip it
- Copy [camanfolder]/dist/caman.full.js to the base folder.
- Include the necessary .js and library files in your HTML page by adding these lines inside <head></head>:
Start by creating buttons for the filters you want. We will position them later.
Where #toEdit is the id of the image.
Now, create this:
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.
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.
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.
Finally, "camanObject.render()" makes changes to the image visible to the user.
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"].
``` 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.
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.