Cordova/phonegap camera script werkt niet

Status
Niet open voor verdere reacties.
ido435

ido435

Gebruiker
Lid geworden
10 nov 2010
Berichten
674
Goedendag,

ik ben nu al een tijde (1 1/2) dag bezig met een plugin voor Cordova / PhoneGap Camera plguin zie de 2 linkjes hier onder.
https://www.npmjs.com/package/cordova-plugin-camera#module_camera.getPicture
https://github.com/apache/cordova-plugin-camera#module_Camera.DestinationType

De bijbehordende plugins zijn geïnstalleerd.
plugins.PNG

Deze code heb ik nu zelf
Code: 
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="format-detection" content="telephone=no" />
		<script type="text/javascript" src="cordova.js"></script>
		<script href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"
		<meta name="viewport" content="user=scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=devicee-width, height=device-height, target-desitydpi=device-dpi" />
		<style>
			#myImage 
			{
				max-width:100%;
			}
			#CameraButton
			{
			width: 6em;
			height: 6em;
			}
		</style>
		<meta name="msapplication-tap-highlight" content="no" />
	</head>
	<body>
		<h1>Appache Cordova </h1>

		<img src="" id="myImage">
		<script type="text/javascript" src="cordova.js"></script>
		<script type="text/javascript">
			$(function()
			{ //$(document).ready(function(){}):
				function cameraSuccess(imgdata)
				{
					$("#img_camPH").attr("src", imgData);
				}
				
				function camError(error)
				{
				alert(error);
				}
				
				function accessCamera()
				{
					var options = {
						destinationType: Camera.DestinationType.FILE_URI,
						sourceType: Camera.PictureSourceType.CAMERA //PHOTOGALLERY
					};
					
					navigator.camera.getPicture(cameraSuccess, cameraError, cameraOptions);
				}
				
				$("btn_camera").on("click", accessCamera);
			});
		</script>
				<div data-role="page">
					<div data-role="header">
						<h1>Camera App</h1>
					</div>
					<div class="ui-content">
						<button id="btn_camera"> Camera </button>
					<img id="img_camPH">
					</div>
				</div>
	</body>
</html>

b.v.d

Ido

Info terzijde:
Deze plugin werkt alleen vanaf android 4.0.× en hoger
Zelf werk ik met 3 devices met android 4.4.× , 4.3.× en 4.1.×
 
Laatst bewerkt:
In de html hieronder heb ik wat dingen in de juiste volgorde gezet en een paar foutjes eruit gehaald. In de documentatie van je camera software kan je meer halen over hoe de regels onder <script type="text/javascript"> eruit moeten zien.
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title>Cordova phonegap camera</title>
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<style type="text/css">
#myImage {
    max-width:100%;
}
#CameraButton {
    width: 6em;
    height: 6em;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body>
<h1>Appache Cordova</h1>
<img src="" id="myImage" />
<script type="text/javascript">
$(function(){  //$(document).ready(function(){
    function cameraSuccess(imgdata) {
        $("#img_camPH").attr("src", imgData);
    }
    function camError(error) {
        alert(error);
    }
    function accessCamera() {
        var options = {
            destinationType: Camera.DestinationType.FILE_URI,
            sourceType: Camera.PictureSourceType.CAMERA //PHOTOGALLERY
        };
        navigator.camera.getPicture(cameraSuccess, cameraError, cameraOptions);
    }
    $("btn_camera").on("click", accessCamera);
});
</script>
<div data-role="page">
    <div data-role="header">
        <h1>Camera App</h1>
    </div>
    <div class="ui-content">
        <button id="btn_camera"> Camera </button>
        <img id="img_camPH" />
    </div>
</div>
</body>
</html>
Er zitten nog wat dingen in waarvan ik weet dat het niet klopt maar waar ik te weinig info over heb.

Suc6.
 
Bedankt bron voor je hulp :)

Ik heb de code's vergeleken en heb de aanpassingen toegevoegt / gewijzigd.
Ik heb op dit moment de code werkent gekregen via deze code:
HTML: 
<!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) {
      // 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 in-line 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);
      var largeImage = document.getElementById('largeImage');
      largeImage.style.display = 'block';
		largeImage.src = imageURI;
    }
    function capturePhoto() {
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
        destinationType: destinationType.DATA_URL });
    }
    function capturePhotoEdit() {
	navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
        destinationType: destinationType.DATA_URL });
    }
    function getPhoto(source) {
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
        destinationType: destinationType.FILE_URI,
        sourceType: source });
    }
   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; width:100px;height:100px;" id="largeImage" src="" />
  </body>
</html>

Tevens heb ik de code meteen een stuk verder uitgebreid.

mvg

Ido
 
Ziet er goed uit :thumb:
Wat opvalt is dat de largeImage (100px) niet echt veel groter is dan de smallImage (60px). Klopt dit?
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan