O'Reilly logo

PhoneGap 4 Mobile Application Development Cookbook by Zainul Setyo Pamungkas

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required