javascript - capture photo with camera in cordova application -
i continue training on cordova , javascript (i need it). try create little application using camera. have take code provide below [http://cordova.apache.org/docs/en/2.5.0/cordova_camera_camera.md.html#camera] , i'm trying adapt code in cordova project in netbeans.
i code below. provide index.html , index.js. have problem when test in emulator. when click on button, nothing happened, there not error message, nothing , take not picture camera. seem there problem line in method capturephoto because have warning in netbeans (global variable destinationtype not declared). me please ?
index.html
<head> <meta http-equiv="content-security-policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <title>hello world</title> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <div class="app"> <h1>apache cordova</h1> <div id="deviceready" class="blink"> <p class="event listening">connecting device</p> <p class="event received">device ready</p> </div> </div> <button id="mybtn">capture photo</button> <br> <img style="display:none;width:80px;height:80px;" id="smallimage" src="" /> <img style="display:none;" id="largeimage" src="" /> <script> document.getelementbyid("mybtn").addeventlistener("click", capturephoto()); </script> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> index.js
var app = { picturesource: "", destinationtype: "", // application constructor initialize: function() { this.bindevents(); }, // bind events required on startup. common events are: // 'load', 'deviceready', 'offline', , 'online'. bindevents: function() { document.addeventlistener('deviceready', this.ondeviceready, false); }, // deviceready event handler // scope of 'this' event. in order call 'receivedevent' // function, must explicitly call 'app.receivedevent(...);' ondeviceready: function() { app.receivedevent('deviceready'); app.picturesource = navigator.camera.picturesourcetype; app.destinationtype = navigator.camera.destinationtype; }, // update dom on received event receivedevent: function(id) { var parentelement = document.getelementbyid(id); var listeningelement = parentelement.queryselector('.listening'); var receivedelement = parentelement.queryselector('.received'); listeningelement.setattribute('style', 'display:none;'); receivedelement.setattribute('style', 'display:block;'); console.log('received event: ' + id); }, // called when photo retrieved onphotodatasuccess: function(imagedata) { var smallimage = document.getelementbyid('smallimage'); smallimage.style.display = 'block'; smallimage.src = "data:image/jpeg;base64," + imagedata; }, // button call function capturephoto: function() { navigator.camera.getpicture(onphotodatasuccess, onfail, { quality: 100, destinationtype: destinationtype.data_url }); }, // called if bad happens. onfail: function(message) { alert('failed because: ' + message); } }; app.initialize(); thanks again advance help
in call navigator.camera.getpicture, want destinationtype: camera.destinationtype.data_url rather destinationtype: destinationtype.data_url. should specify sourcetype , mediatype, might want this:
function capturephoto() { var options = { quality: 100, destinationtype: camera.destinationtype.data_url, sourcetype: camera.picturesourcetype.camera, mediatype: camera.mediatype.camera, encodingtype: camera.encodingtype.jpeg, savetophotoalbum: true }; navigator.camera.getpicture(onphotodatasuccess, onfail, options); } 
Comments
Post a Comment