Skip to content

February 21, 2012

Capture Image, Video and Crop

by Colin

In this tutorial we will access the device’s default camera application, the photo library and we will record a video with PhoneGap. Also at the end we will do a basic crop on a selected image from our gallery using HTML5 Canvas and JavaScript.

End Result:



Download the sources and let’s get started.

First we set up our interface.

[html]
<!– Start of home page –>
<div data-role="page">
<div data-role="header" data-position="fixed"></div>
<div data-role="content"></div>
<div data-role="footer" data-position="fixed"></div>
</div>
<!– /home page –>
[/html]

Then we set the title in the header and footer, add three more buttons and a handler in the content.

[html]
<!– Start of home page –>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Capture image</h1>
</div>
<div data-role="content">
<a data-role="button" id="capture">Capture image</a>
<a data-role="button" id="getImg">Get from library</a>
<a data-role="button" id="captureVideo">Capture Video</a>
<img style="display:none;width:260px;height:260px;" id="image" src="" />
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
<!– /home page –>
[/html]

With the camera.getPicture() function we open the default camera application and we can take pictures.

[js]
capture_btn.click(function(){
capturePhoto();
});

function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
}
[/js]

After we take the picture the camera application closes and our application comes back from the background.

With Camera.sourceType = Camera.PictureSourceType.SAVEDPHOTOALBUM we can access our photo album library and we can retrieve the picture we just shot with our camera or any other image from the photo album. Thus when the Get from library button is pressed a dialog box will pop up allowing us to choose a picture from the library.

[js]
getImg_btn.click(function(){
getImage(pictureSource.SAVEDPHOTOALBUM);
});

function getImage(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
[/js]

To display the picture we get the File URI and insert it into an <img> tag .

[html]
<img style="display:none;width:260px;height:260px;" id="image" src="" />
[/html]

To access the default video recorder application we use navigator.device.capture.captureVideo(captureSuccess, captureError, options);

[js]

function captureVideo() {
// Launch device video recording application,
// allowing user to capture up to 2 video clips
navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 2});
}
[/js]

The operation ends when the user exists the video recording application or when the limit has been reached (in our case we have a limit of 2 video recordings, if the limit parameter is not specified it will use the default value which is 1). After the recording operation ends our application is retrieved.

Now we will take a look at a basic crop functionality. There are several tools out there on the Internet to crop an image using JavaScript and PHP but unfortunately if we intend for our app to be strictly offline there is no server side PHP scripting that we can rely on so to achieve this we must use the HTML5 canvas and JavaScript in order to crop an image offline.

The HTML

[html]
<div id="image_container" style="display:none;">
<img style="display:none;width:260px;height:260px;" id="image" src="" />
<p>Crop Controls</p>
<div data-role="fieldcontain">
<label for="x">X: </label><input type="text" name="x">
</div>
<div data-role="fieldcontain">
<label for="y">Y: </label><input type="text" name="y">
</div>
<div data-role="fieldcontain">
<label for="width">Width: </label><input type="text" name="width">
</div>
<div data-role="fieldcontain">
<label for="height">Height: </label><input type="text" name="height">
</div>
<a data-role="button" id="crop">Crop</a>
<canvas id="myCanvas" width="260" height="260"></canvas>
</div>
[/html]

First you need to select an image from the photo album library and then you have access to the crop settings.

The first thing to notice is the controls for the crop: x, y, width, height. These arguments define the location and size of the rectangle that we want to cut out of an image. The x and y represent the starting points for the rectangle box and the width and height are self explanatory they represent the rectangles width and height. The arguments are passed to a drawing function context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);

[js]
var getX = $(‘input[name=x]’);
var getY = $(‘input[name=y]’);
var getWidth = $(‘input[name=width]’);
var getHeight = $(‘input[name=height]’);

getX.change(function() {
//console.log("X:" + getX.val());
});

getY.change(function() {
//console.log("Y:" + getY.val());
});

getWidth.change(function() {
//console.log("Width:" + getWidth.val());
});

getHeight.change(function() {
//console.log("Height:" + getHeight.val());
});
[/js]

To each button we set an event handle .change() which tells us when a value has been changed. Uncomment console.log() lines if you want to see the debugging log in the simulator.

And now we set the canvas <canvas id="myCanvas" width="260" height="260"></canvas>

[js]
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
[/js]

In my example I used the following input values:

And I got this result:

That’s all, good luck!

Read more from Cocoa

Leave a Reply

required
required

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments