I was able to build a test app based on the camera.getPicture full example in PhoneGap's documentation. It allows me to take a photo or retrieve a photo from the gallery and place it in a div.
However, I want to be able to select multiple images from the gallery and place each in its own div. Can anyone point me in the right direction to learn how to accomplish this?
Thanks.
Here is the javascript I'm using:
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for PhoneGap to connect with the device
document.addEventListener("deviceready",onDeviceReady,false);
// PhoneGap is ready to be used!
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
function onPhotoDataSuccess(imageData) {
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.src = "data:image/jpeg;base64," + imageData;
}
function onPhotoURISuccess(imageURI) {
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.src = imageURI;
}
// A button will call this function
function capturePhoto() {
//add new div
var newPhoto = document.createElement("div");
newPhoto.id = "div";
newPhoto.className ="photo";
newPhoto.innerHTML = "<img id='largeImage' src='' />";
document.getElementById("photos").appendChild(newPhoto);
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onPhotoURISuccess, onFail, { quality: 50 });
}
// A button will call this function
function getPhoto(source) {
//add new div
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
// Called if something bad happens.
function onFail(message) {
alert('Failed because: ' + message);
As of Phonegap 3.5 there is no support for selecting multiple images at the same time. You will need to write or find a plugin that will work with the native code to enable you to do this. Here is the issue described in the Phonegap development plan. https://issues.apache.org/jira/browse/CB-1215
I am working on doing this as well. Here is a link for an Android solution.
http://webcache.googleusercontent.com/search?q=cache:http://www.technotalkative.com/android-select-multiple-photos-from-gallery/
you need to create the div dynamically after every photo is taken.
Your success callback would be something like this:
function onPhotoDataSuccess(imageData) {
// the following is all one line.
document.getElementById("photos").innerHTML+=
"<div>\
<img src=\"data:image/jpeg;base64,"+imageData+"\">\
</div>";
}
then you can style all the imgs via css using something like this
#photos > div {
width: 100px;
margin:10px;
float:left;
}
Related
So, I am using this cordova camera plugin to take a picture using the camera. As my app has almost 10 div's which would fire the camera, I would want to configure the server for the size of binary string I am sending. I tried the following code and it printed binary string instead of file size
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.DATA_URL
});
function onSuccess(imageData) {
//var finalimage = "data:image/jpeg;base64," + imageData;
window.resolveLocalFileSystemURI(imageData, function(fileEntry) {
fileEntry.file(function(fileObj) {
console.log("Size = " + fileObj.size);
});
});
This code is giving me great binary string as output instead of file size. Now I have the other concern too, in the comment above I am converting the image to base 64, so will there be any change in the file size between final image and imageData?
use the function
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
function capturePhotoEdit() {
// Take picture using device camera, allow edit, and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality: 20,
allowEdit: true,
destinationType: destinationType.DATA_URL
});
}
and use in the function "allow edit"
You will get the full edit and crop option.
!!
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
//
var x = 0;
function onPhotoDataSuccess(imageURI) {
x++;
// Uncomment to view the base64-encoded image data
console.log(imageURI);
alert(imageURI);
// Get image handle
//
var y = 'smallImage' + x;
var smallImage = document.getElementById(y);
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The in-line CSS rules are used to resize the image
//
smallImage.src = "data:image/jpeg;base64," + imageURI;
}
// Called when a photo is successfully retrieved
//
var z = 0;
function onPhotoURISuccess(imageURI) {
z++;
// Uncomment to view the image file URI
console.log(imageURI);
alert(imageURI);
// Get image handle
//
var w = 'largeImage' + z;
var largeImage = document.getElementById(w);
// Unhide image elements
//
largeImage.style.display = 'block';
// Show the captured photo
// The in-line CSS rules are used to resize the image
//
largeImage.src = imageURI;
}
// A button will call this function
//
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality: 50,
destinationType: destinationType.DATA_URL
});
}
// A button will call this function
//
function capturePhotoEdit() {
// Take picture using device camera, allow edit, and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality: 20,
allowEdit: true,
destinationType: destinationType.DATA_URL
});
}
// A button will call this function
//
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, {
quality: 50,
allowEdit: true,
destinationType: destinationType.FILE_URI,
sourceType: source
});
}
// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}
In my phonegap application(android version 4.4.2) i need to pick image form sdcard. In this i am unable to read the image size and name. My code is like.
function getSkiImage(id,source){
navigator.camera.getPicture(function(imageURI){
alert(imageURI);
window.resolveLocalFileSystemURI(imageURI, function(fileEntry) {
alert(fileEntry);
fileEntry.file(function(fileObj) {
alert(fileObj.size);
});
});
// tried this also
/*window.requestFileSystem(imageURI, 0, function(data) {
alert(data.size);
}, fail); */
}, fail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: pictureSource.PHOTOLIBRARY });
}
In my android device(v 4.4.2) album shows like "Recent", "Drive", "Images","Gallery",...when select image from gallery then only the image size is getting..other than Gallery image size is not able to get..
refered this but not get success
Cordova/PhoneGap Photo File Size
In phonegap doc they say :
Android 4.4 only: Android 4.4 introduced a new Storage Access
Framework that makes it easier for users to browse and open documents
across all of their preferred document storage providers. Cordova has
not yet been fully integrated with this new Storage Access Framework.
Because of this, the getPicture() method will not correctly return
pictures when the user selects from the "Recent", "Drive", "Images",
or "External Storage" folders when the destinationType is FILE_URI.
However, the user will be able to correctly select any pictures if
they go through the "Gallery" app first. Potential workarounds for
this issue are documented on this StackOverflow question. Please see
CB-5398 to track this issue.
Android uses intents to launch the camera activity on the device to
capture images, and on phones with low memory, the Cordova activity
may be killed. In this scenario, the image may not appear when the
Cordova activity is restored.
<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for PhoneGap to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);
// PhoneGap is ready to be used!
//
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
getPhoto(pictureSource.PHOTOLIBRARY);
}
function onPhotoURISuccess(imageURI) {
alert(imageURI);
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.src = imageURI;
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFileSystemSuccess, rfail);
window.resolveLocalFileSystemURI(imageURI, onResolveSuccess, fail);
}
function rfail(e){
alert(e);
}
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
function onFileSystemSuccess(fileSystem) {
console.log(fileSystem.name);
}
function bytesToSize(bytes) {
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if (bytes == 0) return 'n/a';
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
};
function onResolveSuccess(fileEntry) {
filenameofajax=fileEntry.name;
var efail = function(evt) {
console.log("File entry error "+error.code);
};
var win=function(file) {
console.log(file);
for (var i in file){
alert(i+""+file[i]);
}
alert(bytesToSize(file.size));
};
fileEntry.file(win, efail);
}
function efail(e) {
alert("esa")
}
function fail(e) {
alert("sa")
}
// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}
</script>
</head>
<body>
<button onclick="capturePhoto();">Capture Photo</button> <br>
<button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
</body>
</html>
check this
I am trying to use the Apache Cordova Camera API for displaying the image retrieved from the camera. I am getting the camera call, and able to click the picture. I am getting the file url as
file:///mnt/.....something.jpg
Now, I am not able to set this image in an existing image tag, using jQuery.
The Code I have used is:
$("#img").attr("src", "data:image/jpeg;base64," + imageData);
where imageData is the return value of the camera success callback.
The Options for Cordova Image function, which I am using
destinationType = 0;
sourceType = 1;
encodingType = 0;
There is no image which comes up on the tag.
What can be the issue here?
This a quick example about how this should work:
function changePhoto(){
var cameraSuccess = function(imageURI){
//add dummy param to disable caching
var random = Math.floor(Math.random()*1000);
var newImagePath = imageURI + "?dummy=" + random;
$("#img").attr("src",newImagePath);
};
var cameraError = function(msg){
alert(msg);
};
navigator.camera.getPicture( cameraSuccess, cameraError, {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY
});
},
None of this values working to launch the photo gallery in a phonegap application for android!!!
When the getPicture method is invoked with any of this values it does not pull up the photo gallery.
I build the app using the phonegap build cloud services
Please help,
sample code -
function getPhoto(source) {
alert("getting photo");
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { destinationType: destinationType.FILE_URI, sourceType: source });
}
Camera.PictureSourceType.PHOTOLIBRARY == entire library
Camera.PictureSourceType.SAVEDPHOTOALBUM == camera photo album
If you want users to upload any image on their phone stick to PHOTOLIBRARY.
Or if you want users to upload only the pictures taken by the phone camera then use SAVEDPHOTOALBUM.
May be below line of codes help you out.
function getImage()
{
// Retrieve image file location from specified source
navigator.camera.getPicture(onCapturePhotoSuccess, onCapturePhotoError,{ quality: 80,
destinationType: navigator.camera.DestinationType.DATA_URL,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
});
}
function onCapturePhotoSuccess(imageURI)
{
var smallImage = document.getElementById('id_for_setting_pic_somewhere_in_html');
smallImage.src = "data:image/jpeg;base64," + imageURI;
}
function onCapturePhotoError(message)
{
console.log('Captured Failed because: ' + message);
}
I am trying out the Camera API for Phonegap and I have ran into a problem. Using the code from the Official Documentation:
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for PhoneGap to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);
// PhoneGap is ready to be used!
//
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
// Uncomment to view the base64 encoded image data
// console.log(imageData);
// Get image handle
//
var smallImage = document.getElementById('smallImage');
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
smallImage.src = "data:image/jpeg;base64," + imageData;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
// Uncomment to view the image file URI
// console.log(imageURI);
// Get image handle
//
var largeImage = document.getElementById('largeImage');
// Unhide image elements
//
largeImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
largeImage.src = imageURI;
}
// A button will call this function
//
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
}
// A button will call this function
//
function capturePhotoEdit() {
// Take picture using device camera, allow edit, and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true });
}
// A button will call this function
//
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}
</script>
And my button:
<button onclick="capturePhoto();">Capture Photo</button>
And img tag:
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
The camera opens up fine, and takes a photo no problem, however, it does not show up on the page.
I have more code that lets you select an image form the photo album, and this works perfectly, displaying it in a different image tag.
I believe the problem is that it cannot find imageData.
The captured photo does get saved to the phone, and it can be displayed using the other button, but I want it to show straight after taking the photo.
I am using JQM btw and compiling my APK using the Phonegap:Build web compiler.
The documentation on Phonegap is wrong. To get the base64 encoded picture you need to call
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality:50, destinationType:Camera.DestinationType.DATA_URL });
It is much easier and cleaner to use the file URI (but be careful if you want the image to persist, on iOS the images are saved to a temporary folder - http://docs.phonegap.com/en/1.7.0/cordova_camera_camera.md.html#Camera). You can display the images right away as follows:
navigator.camera.getPicture(displayPicture, function(err){}, {quality : 40,
destinationType : Camera.DestinationType.FILE_URI,
sourceType : Camera.PictureSourceType.CAMERA});
function displayPicture(file_uri){
var img_tag = '<img style="width:60px;height:60px;" id="smallImage" src="'+file_uri+'" />';
//Attach the img tag where ever you want it ... $(<some parent tag>).append(img_tag) etc.
}
In the CapturePhoto() function, add this option;
destinationType : Camera.DestinationType.FILE_URI,
As Phonegap says, using FILE_URI is the best practice for taking pictures with new generation phones.
To show the image use this approach in the getPhotoDataSuccess;
$('#smallImage').attr("src",imageURI);