3

我尝试从 android/Ios 设备捕获图像和视频并通过电子邮件发送它们。我想制作一个混合应用程序。所以我为此使用 phonegap 最新版本。我在互联网上搜索并找到了一些代码并将它们排列在一起。现在我希望该用户只能捕获 2 个视频,并且我的代码可以正常工作。但是现在当我尝试捕获图像时,它不起作用。图像不在本地存储。我还希望该用户只能捕获 5 张图像,当单击“发送”按钮时,捕获的图像和视频附加并通过电子邮件发送。 这是我的代码,我做了什么

        <!DOCTYPE html>
    <html>
      <head>
        <title>Capture Photo</title>

        <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" charset="utf-8">


        //*********************************

                function deviceready() {
                    alert("Device ready");    
                     destinationType=navigator.camera.DestinationType;
                }

                 var destinationType; // sets the format of returned value


                function composeText(){
                    alert();
                    var file1 = document.getElementById('vehiclepic1').value;
                    //var message1 = document.getElementById('message_body').value;
                    alert(file1);
                    window.plugins.emailComposer.showEmailComposer(
                            "Get Estimation",
                            message1,
                            ["test@mail.com",],
                            [],
                            [],
                            true,
                            ["image.jpeg", "file.zip"]
                        );

                    alert('send');
                }

                  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
              // alert(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);


        //*********************************

        // Called when capture operation is finished
        //
        function captureSuccess(mediaFiles) {
        alert ("success");
        alert (mediaFiles.fullPath);
        //alert("path : "+mediaFiles.fullPath+", name : "+mediaFiles.name+", type : "+mediaFiles.type+", size : "+mediaFiles.size);

        //var i, path,len;
        //for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         //    path = mediaFiles[i].fullPath;
        //}       
        }

        // Called if something bad happens.
        // 
        function captureError(error) {
        var msg = 'An error occurred during capture: ' + error.code;
        navigator.notification.alert(msg, null, 'Uh oh!');
        }

        // A button will call this function
        //
        function captureVideo() {
        // Launch device video recording application, 
        // allowing user to capture up to 2 video clips
        navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 2});
        }

        // Upload files to server
        function uploadFile(mediaFile) {
        var ft = new FileTransfer(),
            path = mediaFile.fullPath,
            name = mediaFile.name;

        ft.upload(path,
            "http://my.domain.com/upload.php",
            function(result) {
            alert('Upload success: ' + result.responseCode);
            alert(result.bytesSent + ' bytes sent');
            },
            function(error) {
            alert('Error uploading file ' + path + ': ' + error.code);
            },
            { fileName: name });   
        }
    </script>
    <!-- ********************** -->

    <script>
        var pictureSource;   // picture source
        var destinationType; // sets the format of returned value 

        // Wait for Cordova to connect with the device
        //
        document.addEventListener("deviceready",onDeviceReady,false);

        // Cordova is ready to be used!
        //
        function onDeviceReady() {
        pictureSource=navigator.camera.PictureSourceType;
        destinationType=navigator.camera.DestinationType;
        }

        // Called when a photo is successfully retrieved
        //
        function onPhotoDataSuccess(imageData) {
          // Uncomment to view the base64 encoded image data
          // alert(imageData);

          // Get image handle
          //
          var smallImage = document.getElementById('smallImage');

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

        // Called when a photo is successfully retrieved
        //
        function onPhotoURISuccess(imageURI) {
          // Uncomment to view the image file URI 
          // alert(imageURI);

          // Get image handle
          //
          var largeImage = document.getElementById('largeImage');

          // Unhide image elements
          //
          largeImage.style.display = 'block';

          // Show the captured photo
          // The inline CSS rules are used to resize the image
          //
          largeImage.src = imageURI;
        }

        // A button will call this function
        //
        /*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 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;

            }
        }

        // A button will call this function
        //
        function capturePhotoEdit() {
          // Take picture using device camera, allow edit, and retrieve image as base64-encoded string  
          navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
        destinationType: destinationType.DATA_URL });
        }

        // A button will call this function
        //
        function getPhoto(source) {
          // Retrieve image file location from specified source
          navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
        destinationType: destinationType.FILE_URI,
        sourceType: source });
        }

        // Called if something bad happens.
        // 
        function onFail(message) {
          alert('Failed because: ' + message);
        }

        </script>
      </head>
      <body>
        <button onclick="captureVideo();">Capture Video</button> <br>
        <button onclick="capturePhoto();">Capture Photo</button> <br>
        <!-- <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br> -->
        <!-- <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br> -->
        <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
        <button onclick="composeText();">Send</button><br>
        <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
        <img style="display:none;" id="largeImage" src="" />

        <u><b>Pictures</b></u>

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


        </ul>



      </body>
    </html>

并且此代码是否适用于 Ios 设备,或者我必须更改其中的任何内容?

我使用来自Github的 EmailComposerWithAttachments 插件

4

1 回答 1

3

如果您使用的是 Cordova 3.0.0 ...您可以使用以下命令在本地安装此插件( https://github.com/steve-jansen/cordova-ios-emailcomposer )

cordova plugin add emailcomposer # 使用http://plugins.cordova.io注册表

 add the path of your image in the body as below code

var emailComposer = cordova.require('emailcomposer.EmailComposer');
emailComposer.show({ 
   to: toemail,
   subject: emailsubject,
   body: '<p> '+body+'</p><img alt="Embedded Image" height="200" width="200" src="'+path+'" />',
   isHtml: true,
});

图像路径取自此函数

 function sendEmail(imageData) {
   var largeImage = document.getElementById('largeImage');
       largeImage.style.display = 'block';
       largeImage.src = "data:image/jpeg;base64," + imageData;
  path = "data:image/jpeg;base64," + imageData; // this variable I used in body of email
  var cc = Ext.ComponentQuery.query('camerashare');
  cc[0].items.getByKey('ttbar').show();

}

于 2013-11-13T22:26:44.220 回答