Book Image

PhoneGap Beginners Guide (third edition)

Book Image

PhoneGap Beginners Guide (third edition)

Overview of this book

Table of Contents (22 chapters)
PhoneGap Beginner's Guide Third Edition
About the Authors
About the Reviewers
Related Plugin Resources

Time for action – manipulating images with a canvas

Get ready to apply a sepia effect to an image acquired using the Media Capture API. Execute the following steps:

  1. Open the command-line tool and create a new PhoneGap project named ImageEffect:

    $ cordova create ImageEffect
  2. Change the path to the newly created project:

    $ cd ImageEffect
  3. Add the Media Capture API plugin using the following command:

    $ cordova plugin add cordova-plugin-media-capture
  4. Add a canvas tag with the id value as #manipulatedImage to the existing markup, in order to use it to render the manipulated image:

    <canvas id='manipulatedImage' />
  5. Once the deviceready event has been fired, access the device camera, which allows the user to access only one image:

    var capture = navigator.device.capture;
    capture.captureImage(onGetImage, onImageError, {limit: 1});
  6. Define the success handler and access the file information stored in the array that is returned as an argument:

    function onGetImage(files){
        var currentFile = files[0...