CODEWITHSUNDEEP
javascriptmobilecordova
mahi
mahi

Reputation: 41

Capture photo using navigator.camera or plain javascript

I want to take a photo by using device camera and it will be stored in the some type of thumbnail:

function onDeviceReady() {
    pictureSource = navigator.camera.PictureSourceType;
    destinationType = navigator.camera.DestinationType;
}

function onPhotoDataSuccessFront(imageData) {

    var smallImageFront = document.getElementById('smallImageFront');
    smallImageFront.style.display = 'block';
    smallImageFront.src = "data:image/jpeg;base64," + imageData;

    $('#btnFrontDiv').text('Retake Front');
}

As you can see I use navigator.camera which is avaliable in cordova/phonegap. I want to capture photo by using cordova or plain javascript. Thanks for any advice.

Upvotes: 2

Views: 3002

Answers (3)

Ved
Ved

Reputation: 2701

Capture and Upload image using phonegap 

function uploadImage(){          
    navigator.camera.getPicture(uploadPhoto, onFailcapturePhoto, { quality: 50,destinationType: Camera.DestinationType.FILE_URI }); 
}

function onFailcapturePhoto(message) {    
    console.log("Message = " + message);
}

function uploadPhoto(imageURI) {
    var imagefile = imageURI; 
    $('#imageId').attr('src', imagefile);
    /* Image Upload Start */
    var ft = new FileTransfer();                     
    var options = new FileUploadOptions();                      
    options.fileKey="vImage1";                      
    options.fileName=imagefile.substr(imagefile.lastIndexOf('/')+1);
    options.mimeType="image/jpeg";  
    var params = new Object();
    params.value1 = "test";
    params.value2 = "param";                       
    options.params = params;
    options.chunkedMode = false;                       
    ft.upload(imagefile, your_service_url, win, fail, options);   
}

function win(r) {
  console.log("Code = " + r.responseCode);
  console.log("Response = " + r.response);
//alert($.parseJSON(r.response))    
}

function fail(error) {
   console.log("Response = " +  error.code);
}

Upvotes: 1

Yagnesh Agola
Yagnesh Agola

Reputation: 4639

You may use HTML5 which has brought a surge of access to device hardware.

See this Link Capturing Audio & Video in HTML5

Note :getUserMedia() has been supported since Chrome 21, Opera 18, and Firefox 17.

Please go through support browser list (for mobile phone also) before implementing this.

Upvotes: -1

Aravin
Aravin

Reputation: 4108

Try this one 

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title> Cmaer</title>
<script type="text/javascript" src="cordova.js" ></script>
<script type="text/javascript">
var pictureSource,destinationType;
            document.addEventListener("deviceready",loaded,false);
            function loaded() {
                pictureSource=navigator.camera.PictureSourceType;
                destinationType=navigator.camera.DestinationType;
            }
            function getPhoto(imageData) {
                var smallImage = document.getElementById('smallImage');
                smallImage.style.display = 'block';
                smallImage.src = imageData;
            }
            function capturePhoto() {
                navigator.camera.getPicture(getPhoto, onFail, { quality: 50 });
            }
            function onFail(message) {
                alert('Failed because: ' + message);
            }
            </script>
    </head>
    <body>
        <button onclick="capturePhoto();">Capture Photo</button> <br>
        <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />

</body>
</html>

Reference

Upvotes: 1

Related Questions