Book Image

PhoneGap 4 Mobile Application Development Cookbook

Book Image

PhoneGap 4 Mobile Application Development Cookbook

Overview of this book

Table of Contents (19 chapters)
PhoneGap 4 Mobile Application Development Cookbook
Credits
About the Authors
About the Reviewer
www.PacktPub.com
Preface
Index

Applying an effect to an image using canvas


Capturing a photo on our device is fantastic, but what all can we do with an image once we have it in our application? In this recipe, we'll create some simple functions to edit the color of an image without altering the original source.

How to do it...

We must create and use the HTML5 canvas element to load and edit the values of a stored image, by performing the following steps:

  1. Firstly, create a new PhoneGap project named cameraeffect by running the following command:

    phonegap create cameraeffect com.myapp.cameraeffect cameraeffect
    
  2. Add the devices platform. You can choose to use Android, iOS, or both:

    cordova platform add ios
    cordova platform add android
    
  3. Open www/index.html and clean up the unnecessary elements. We will use jQuery, so we have to make a reference:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="format-detection" content="telephone=no" />
            <meta name="msapplication...