Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

android - Phonegap : capture Image, Video and Send as Attachment in Email

I try to capture image and video from android/ Ios device and send them through email. I Want to make a hybrid app. so I use phonegap latest release for that. I search over Internet and found some of code and arrange them together. Now I want that user can capture only 2 videos, and my code for that working fine. but now when I try to capture image, then its not working. Image not store locally. I also want that user can capture only 5 images and when click on "send" button, That captured images and videos attached and emailed. Here is my code, What I done

        <!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,
                            ["[email protected]",],
                            [],
                            [],
                            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>

And Is this code work same for Ios device or I have to change anything in that ?

I use EmailComposerWithAttachments plugin from Github

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

if you are using Cordova 3.0.0 ... you can install this plugin(https://github.com/steve-jansen/cordova-ios-emailcomposer) locally using the following command

cordova plugin add emailcomposer # using the http://plugins.cordova.io registry

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

image path is taken from this function

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

}


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...