admin管理员组文章数量:1296330
For testing purposes I copied the full example found on the phonegap camera API and I put an alert on onPhotoDataSuccess to test when the function is fired. On the first photo taken the alert will not show. However after the first attempt the alert will show after the photo is saved.
Any advice? I will be happy to be more specific if something is unclear.
I tested the code below on my Android Galaxy S3
<!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 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
//
function onPhotoDataSuccess(imageData) {
// Unment 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) {
// Unment 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,
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,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
// 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>
---------- UPDATE 1 ------------------
I have tested it on another bit of code:
(function () {
$scroller = $('.scroller'),
// Take a picture using the camera or select one from the library
takePicture = function (e) {
var options = {
quality: 45,
targetWidth: 1000,
targetHeight: 1000,
destinationType: Camera.DestinationType.FILE_URI,
encodingType: Camera.EncodingType.JPEG,
sourceType: Camera.PictureSourceType.CAMERA
};
navigator.camera.getPicture(
function (imageURI) {
console.log(imageURI);
alert('test');
$scroller.append('<img src="' + imageURI + '"/>');
},
function (message) {
// We typically get here because the use canceled the photo operation. Fail silently.
}, options);
return false;
};
$('.camera-btn').on('click', takePicture);
}());
And this has the same effect. It does nothing during the first snap but it shows the picture after the second snap. I also just found out that the picture that shows after the second is snap is the first photo that I took. It seems that the first argument in getPicture does not trigger on the first snap. This is frustrating as logcat does not really show me anything to work with.
---------------- UPDATE 2 ----------------
I just tried it on Phonegap Build and it works. So it must have something to do with the plugin...
For testing purposes I copied the full example found on the phonegap camera API and I put an alert on onPhotoDataSuccess to test when the function is fired. On the first photo taken the alert will not show. However after the first attempt the alert will show after the photo is saved.
Any advice? I will be happy to be more specific if something is unclear.
I tested the code below on my Android Galaxy S3
<!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 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
//
function onPhotoDataSuccess(imageData) {
// Unment 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) {
// Unment 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,
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,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
// 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>
---------- UPDATE 1 ------------------
I have tested it on another bit of code:
(function () {
$scroller = $('.scroller'),
// Take a picture using the camera or select one from the library
takePicture = function (e) {
var options = {
quality: 45,
targetWidth: 1000,
targetHeight: 1000,
destinationType: Camera.DestinationType.FILE_URI,
encodingType: Camera.EncodingType.JPEG,
sourceType: Camera.PictureSourceType.CAMERA
};
navigator.camera.getPicture(
function (imageURI) {
console.log(imageURI);
alert('test');
$scroller.append('<img src="' + imageURI + '"/>');
},
function (message) {
// We typically get here because the use canceled the photo operation. Fail silently.
}, options);
return false;
};
$('.camera-btn').on('click', takePicture);
}());
And this has the same effect. It does nothing during the first snap but it shows the picture after the second snap. I also just found out that the picture that shows after the second is snap is the first photo that I took. It seems that the first argument in getPicture does not trigger on the first snap. This is frustrating as logcat does not really show me anything to work with.
---------------- UPDATE 2 ----------------
I just tried it on Phonegap Build and it works. So it must have something to do with the plugin...
Share edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Sep 6, 2013 at 5:44 Ian PowellIan Powell 1312 silver badges6 bronze badges 5- could really use an answer here if anyone knows. Is this for 3.0.0 or 3.0.0rc1? – Joseph Dailey Commented Sep 6, 2013 at 5:46
- 1 Could you paste the code you are using and tell us what phone you are testing with. – Zorayr Commented Sep 6, 2013 at 19:46
- Are you developing for iOS? From the PhoneGap docs: "Including a JavaScript alert() in either of the callback functions can cause problems. Wrap the alert within a setTimeout() to allow the iOS image picker or popover to fully close before the alert displays:" If you change the alert to console.log, does the first callback work? – ville Commented Sep 10, 2013 at 14:59
- I have tested on two Android phones and I am still not getting the image on the first take. I have to take another one for the image to appear. I also added an alert for the onPhotoDataSuccess and that only appears after the second picture is taken. I have also tried using "phonegap build android" and "cordova build android". I am not sure if there is a difference there but both results are the same. – Ian Powell Commented Sep 12, 2013 at 18:13
- What version of phonegap do you use? – Volodymyr Bezuglyy Commented May 29, 2014 at 15:34
6 Answers
Reset to default 1I don't know whether this is right solution or not but its work for me perfectly. It would be batter to trace your log cat and found exact issue.
Try to use navigator.camera.PictureSourceType instated of pictureSource. so it looks like
<button onclick="getPhoto(navigator.camera.PictureSourceType.PHOTOLIBRARY);">From Photo Library</button><br>
and same way replace in Javascript code as well
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI });
OR
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: navigator.camera.DestinationType.DATA_URI });
Update: Try to save your corodova.js locally and call from local dir, so your dir should like
assets/www/js/cordova.js
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
Working Code
Hope this will help you !!!
I had the same problem after updating from 3.0.0 to 3.1.0. Delayed camera, no geolocation, etc.
Look if the file platforms\android\cordova\version states an old version.
Then you need to update your platform. So here is what i did.
- Remove all plugins:
cordova plugin rm org.apache.cordova.camera - Remove the platform:
cordova platform remove android(will delete changes you have made to *.java files) - Add the platform:
cordova platform add android - Add all plugins:
cordova plugin add org.apache.cordova.camera - Check permissions
- Build it
It's basically like creating a new project.
had exactly the same problem. Capture success was only receiving the callback after captureVideo had been called for the second time.
Just replaced my old app/bin/cordova.jar file with new 3.2.0 cordova-dev.jar (in eclispe) and all back in order :)
I had this exact problem on Cordova 3.4.0, with a fresh Cordova install (no upgrade from previous version as some others posted). Taking the first picture would do nothing- no success callback, no fail callback. Taking the second picture would result in a success callback but the DATA_URL data (the base64 encoded image) that came back was the data from the FIRST picture.
For me it was working fine on one phone, various emulators, etc. except on one Android 4.2 phone where it did this. The solution was to uninstall the app from the phone using the phone's application management under settings, then reinstall the app- then the first picture would trigger the success callback with its own data.
No idea why, but uninstalling and reinstalling the app resolved it for me.
I met the same problem and solved it. Because you import two "cordova.js" in your app, and maybe one is in the iframe. you can use "parent.cordova" in iframe instead.
I had this problem with Cordova 3.7.1 and Camera 0.3.5 - every time I called the plugin, it did not return the image/path and on second call it returned error "Canceled" for the previous call.
The problem was that my main activity had own onActivityResult which did not correctly call the super's method.
public class MainActivity extends CordovaActivity {
//...
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent intent) {
if (requestCode == MyCustomActivity) {
doMyCustomActivity(requestCode);
}
}
//...
}
To fix it, I had to add ELSE to call the correct handler:
public class MainActivity extends CordovaActivity {
//...
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent intent) {
if (requestCode == MyCustomActivity) {
doMyCustomActivity(requestCode);
}
else { //this was missing - call other Activity of plugins
super.onActivityResult(requestCode, resultCode, intent);
}
}
//...
}
本文标签： javascriptPhonegap(300) Camera not successful on first tryStack Overflow
版权声明：本文标题：javascript - Phonegap(3.0.0) Camera not successful on first try - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741624661a2389012.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论