0

私は使用してPhonegapおり、最低 2 枚、最高 8 枚の写真を撮る必要があります。キャプチャしたすべての写真を同じ画面に表示する必要があります。1 枚の写真をキャプチャして表示することはできますが、8 枚すべての写真を表示することはできません。

また、これらの画像をメールに添付する必要があります。「/mnt/sdcard/Android/data/packagename/cache/1380176187637.jpg」を指定した場合、メールコンポーザーを使用しています。メールに添付されますが、8枚すべての画像が添付されません。以下のスクリーン ショットでは、1 つの画像のみが表示されていることがわかります。 画像

画像は 1 つしか表示できませんが、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>

何か案が。

4

2 に答える 2

2

コードを簡素化できます。

function displayPhoto(imageURI)
{
    capturedPhoto ++;
    document.getElementById('part' + capturedPhoto ).src =  imageURI;
}
于 2014-03-27T13:31:29.503 に答える
1

以下の方法で解決しました。

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;

}
}
于 2013-10-16T04:11:15.567 に答える