cordova plugin add https://github.com/Telerik-Verified-Plugins/ImagePicker
appbuilder plugin add "ImagePicker"
The ImagePicker plugin allows your users to select images from their photo library.
If you want to use the default options then usage couldn't be simpler. After deviceready has fired do this:
imagePicker.getPictures( function(result) { JSON.stringify(result) }, // success handler function(errmsg) { console.log("ohoh.. " + errmsg }, // error handler {} // options object }
You probably want a bit of control over things like compression and dimensions, so here are the options supported by the plugin. All options are available on both platforms.
imagePicker.getPictures( function(result) { JSON.stringify(result) }, // success handler function(errmsg) { console.log("ohoh.. " + errmsg }, // error handler { // options object, all optional maximumImagesCount: 2, // Android only since plugin version 2.1.1, default no limit quality: 90, // 0-100, default 100 which is highest quality width: 400, // proportionally rescale image to this width, default no rescale height: 400, // same for height outputType: imagePicker.OutputType.BASE64_STRING // default .FILE_URI } }
Selecting images is one thing, but how do you process the result returned from the native picker UI?
The success handler receives an array of file URI's (this example) or base64 encoded strings, depending on the outputType set. This array can be of length 0 by the way, when the user didn't select anything or cancelled the selection.
Here's a very simple implementation. The one in the demo app (installed from that big button at the top of this page) is a bit more.. ehhhm.. sophisticated.
imagePicker.getPictures( function(result) { for (var i = 0; i < result.length; i++) { alert('use this as img src: ' + result[i]); } }, function(errmsg) { console.log("ohoh.. " + errmsg }, {} }