CODEWITHSUNDEEP
javascriptandroidcordova
surhidamatya
surhidamatya

Reputation: 2609

PhoneGap - show multiple picture captured from Camera

I am using Phonegap and I need to take minimum 2 and maximum 8 photos. I need to show all captured photos in the same screen. I am able to capture 1 photo and show but unable to show all 8 photos.

Also, I need to attach these images to mail. I am using email composer if i gave "/mnt/sdcard/Android/data/pacakgename/cache/1380176187637.jpg" then it is attached in mail but all 8 picture does not get attached. In below screen shot you can see only one picture is viewed: image

I am able to only show one image but i need to show all 8 pics and attached it to mail.

Following is my code

<html>
<head>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8" src="emailcomposer.js">    </script>

    <script type="text/javascript">
    function deviceready() {
        console.log("Device ready");    
         destinationType=navigator.camera.DestinationType;
    }

     var destinationType; // sets the format of returned value


    function composeText(){
    //console.log();
    var file1 = document.getElementById('vehiclepic1').value
    var message1 = document.getElementById('message_body').value;
    console.log(message1);
    window.plugins.emailComposer.showEmailComposer(
            "Get Estimation",
            message1,
            ["[email protected]",],
            [],
            [],
            true,
            ["image.jpeg", "file.zip"]
        );
    }

      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 });
}

 function onPhotoDataSuccess(imageData) {
  // Uncomment to view the base64-encoded image data
  // console.log(imageData);

  // Get image handle
  //
  var i = 0;
  if(imageData.length != 0){
    i++;
    //alert(i++);
  var smallImage = document.getElementById('vehiclepic1');

  // 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;
}
}

function onFail(message) {
  alert('Failed because: ' + message);
}

function callAnotherPage(){
    window.location = "test.html";
}


    document.addEventListener("deviceready", deviceready, true);
    </script>
    <style type="text/css">
li{
list-style: none;
float:left;
padding: 0 5 5 0 ;
}
    </style>
</head>
<body>
    Pictures

    <ul>
    <li>
         <img style="width:100px;height:80px;" id="vehiclepic1" onclick="capturePhoto();" src="" />
    </li>



    <li>
      <img style="width:100px;height:80px;" id="vehiclepic2" src="" onclick="capturePhoto();"/>
    </li>

    <li>
      <img style="width:100px;height:80px;" id="vehiclepic3" src="" onclick="capturePhoto();" />

    </li>

    <li>
      <img style="width:100px;height:80px;" id="vehiclepic4" src="" onclick="capturePhoto();"/>
    </li>

    <li>
      <img style="width:100px;height:80px;" id="vehiclepic5" src="" onclick="capturePhoto();"/>
    </li>

    <li>
      <img style="width:100px;height:80px;" id="vehiclepic6" src="" onclick="capturePhoto();"/>
    </li>

    <li>
      <img style="width:100px;height:80px;" id="vehiclepic7" src="" onclick="capturePhoto();"/>
    </li>

    <li>
      <img style="width:100px;height:80px;" id="vehiclepic8" src="" onclick="capturePhoto();"/>
    </li>
    </ul>

<div style="clear:both;"></div>
      <button onclick="callAnotherPage();">Next</button>
</body>

Any idea.

Upvotes: 0

Views: 1956

Answers (2)

Arus81
Arus81

Reputation: 21

You can simplify your code:

function displayPhoto(imageURI)
{
    capturedPhoto ++;
    document.getElementById('part' + capturedPhoto ).src =  imageURI;
}

Upvotes: 2

surhidamatya
surhidamatya

Reputation: 2609

I solved it the following way. 

function capturePhoto() {
  // Take picture using device camera and retrieve image as base64-encoded string
  navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 25,
destinationType: Camera.DestinationType.FILE_URI, });
}

function onPhotoDataSuccess(imageURI) {

  displayPhoto(imageURI);
}


function displayPhoto(imageURI)
{

capturedPhoto ++;

if(capturedPhoto == 1){
var part1 = document.getElementById('part1');
 part1.src =  imageURI;
}
else if(capturedPhoto == 2){
var part2 = document.getElementById('part2');
  part2.src =  imageURI;
}
else if(capturedPhoto == 3){
var part3 = document.getElementById('part3');
  part3.src =  imageURI;

}
else if(capturedPhoto == 4){
var part4 = document.getElementById('part4');
  part4.src =  imageURI;

}
else if(capturedPhoto == 5){
var part5 = document.getElementById('part5');
  part5.src =  imageURI;

}
else if(capturedPhoto == 6){
var part6 = document.getElementById('part6');
  part6.src =  imageURI;
}
else if(capturedPhoto == 7){
var part7 = document.getElementById('part7');
part7.src =  imageURI;

}
else if(capturedPhoto == 8){
var part8 = document.getElementById('part8');
  part8.src =  imageURI;

}
}

Upvotes: 1

Related Questions