CanvasCameraPlugin
Cordova canvas camera plugin for iOS/Android, supports camera preview and taking photos.
Plugin's Purpose
The purpose of the plugin is to capture video to preview camera on web page(canvas tag) and to take photos with user defined quality / dimension.
Supported Platforms
- iOS
- Android
Dependencies
Cordova will check all dependencies and install them if they are missing.
Installation
The plugin can either be installed into the local development environment or cloud based through PhoneGap Build.
Adding the Plugin to your project
Through the Command-line Interface:
# ~~ from master ~~ cordova plugin add https://github.com/donaldp24/CanvasCameraPlugin.git && cordova prepare
or to use the last stable version:
# ~~ stable version ~~ cordova plugin add com.simetrica.cordova.plugin.canvascamera && cordova prepare
Removing the Plugin from your project
Through the Command-line Interface:
cordova plugin rm com.simetrica.cordova.plugin.canvascamera
PhoneGap Build
Add the following xml to your config.xml to always use the latest version of this plugin:
or to use an specific version:
More informations can be found here.
ChangeLog
Version 1.0.0 (not yet released)
- [feature:] Create plugin
Using the plugin
The plugin creates the object window.plugin.CanvasCamera
with the following methods:
Plugin initialization
The plugin and its methods are not available before the deviceready event has been fired. Have to call [initialize][initialize] with canvas object(canvas tag to preview camera).
document;
start
start capture video as images from camera to preview camera on web page.
[capture][capture] callback function will be called with image data(image file url) at each time when the plugin take an image for a frame.
windowCanvasCamerastartoptions;
This function start video capturing session, then the plugin takes each frame as a jpeg image and gives it's url to web page calling [capture][capture] callback function with the image url.
[capture][capture] callback function will draw the image to play video.
Example
{ var options = quality: 75 destinationType: CanvasCameraDestinationTypeDATA_URL encodingType: CanvasCameraEncodingTypeJPEG width: 640 height: 480 ; windowpluginCanvasCamerastartoptions;}
takePicture
take a photo.
windowplugin;
This function takes a photo. When taked a photo successfully, then the plugin calls onSuccess callback function with image URI or data URL according to options. If options.saveToPhotoAlbum is true, then this function saves taked photo to photo album, too.
// if options.destinationType == CanvasCamera.DestinationType.IMAGE_URI { imagesrc = data; // URI} // else if options.destinationType == CanvasCamera.DestinationType.DATA_URL { imagesrc = "data:image/jpeg;base64," + data; // options.encodingType == CanvasCamera.EncodingType.JPEG // image.src = "data:image/png;base64," + data; // options.encodingType == CanvasCamera.EncodingType.PNG}
setFlashMode
Set flash mode for camera.
windowpluginCanvasCamera;
flashMode
Value of flashMode can be one of the followings;
CanvasCameraFlashMode = OFF : 0 ON : 1 AUTO : 2;
windowpluginCanvasCamera;
setCameraPosition
Change input camera to front or back camera.
windowpluginCanvasCamera;
cameraPosition
Value of cameraPosition can be one of the followings;
CanvasCameraCameraPosition = BACK : 1 FRONT : 2;
windowpluginCanvasCamera;
capture
callback function. User could override this function to draw images on a canvas tag.
options
Optional parameters to customize the settings.
quality : 75 destinationType : CanvasCameraDestinationTypeDATA_URL sourceType : CanvasCameraPictureSourceTypeCAMERA allowEdit : true encodingType: CanvasCameraEncodingTypeJPEG correctOrientation: true saveToPhotoAlbum: false width: 640 height: 480 ;
- quality: Quality of saved image. Range is [0, 100]. (Number)
- destinationType: Choose the format of the return value. Defined in Camera.DestinationType (Number)
CanvasCameraDestinationType = DATA_URL : 0 // Return image as base64 encoded string FILE_URI : 1 // Return image file URI ;
- sourceType: Set the source of the picture. Defined in Camera.PictureSourceType (Number)
CanvasCameraPictureSourceType = PHOTOLIBRARY : 0 CAMERA : 1 SAVEDPHOTOALBUM : 2;
- allowEdit: Allow simple editing of image before selection. (Boolean)
- encodingType: Choose the encoding of the returned image file. Defined in Camera.EncodingType (Number)
CanvasCameraEncodingType = JPEG : 0 // Return JPEG encoded image PNG : 1 // Return PNG encoded image ;
- width: Width in pixels to scale image. Could be used with targetHeight. Aspect ratio is keeped. (Number)
- height: Height in pixels to scale image. Could be used with targetWidth. Aspect ratio is keeped. (Number)
- correctOrientation: Rotate the image to correct for the orientation of the device during capture. (Boolean)
- saveToPhotoAlbum: Save the image to the photo album on the device after capture. (Boolean)
Full Example
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --> Hello World Apache Cordova Connecting to Device Device is Ready Camera Position Back Front Flash Mode Off On Auto
Contributing
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request
License
This software is released under the Apache 2.0 License.
© 2013-2014 Snaphappi, Inc. All rights reserved