Question

我正在使用Phonegap，我需要拍摄至少2张和最多8张照片。我需要在同一个屏幕上显示所有拍摄的照片。我能够拍摄1张照片并显示但无法显示所有8张照片。

另外，我需要将这些图像附加到邮件中。我正在使用电子邮件作曲家，如果我给“/mnt/sdcard/Android/data/pacakgename/cache/1380176187637.jpg”然后它附在邮件但所有8张图片都没有附加。在下面的屏幕截图中，您只能看到一张照片被查看：

我只能显示一张图片，但我需要显示所有8张图片并将其附加到邮件中。

以下是我的代码

<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,
            ["sth@mail.com",],
            [],
            [],
            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>

任何想法。

Answer 1

您可以简化代码：

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

Answer 2

我通过以下方式解决了这个问题。

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;

}
}

PhoneGap - 显示从Camera捕获的多张图片

2 个答案: