phoneGap camera and sencha touch view

问题

I have to combine the phoneGap camera api with sencha touch.

I have created a view CameraView and a controller Camera, but I don't know how to display the image captured by the camera on my view.

 // JavaScript Document
 LoginForm.views.CameraView = Ext.extend(Ext.form.FormPanel,
 {
     id:'CameraView',

 title: "CameraView",
 html:'<img height=200 width=200 id="myImage"/>',




initComponent: function() 
{

    Ext.apply(this, 
    {
        bodyStyle:'background-color:#fff;padding: 10px',

        dockedItems: 
        [{
            dock:'bottom',
            xtype: "toolbar",
            id:"loginToolbar",
            title: "Login",
            items:[{ xtype:'button',cls:'x-backButton', ui:'back',text:'Back',cls:'x-button-back',handler:this.backButton,scope:this},{xtype:'spacer'},
            { xtype:'button' ,cls:'x-cameraButtonBlack',ui:'normal',handler:this.onCameraClicked,scope:this }
                    ]
        }],


    });
    LoginForm.views.CameraView.superclass.initComponent.apply(this, arguments);
},
onCameraClicked:function()
{
    console.log("inside oncameracliked");
    Ext.dispatch({ controller: 'Camera',action: 'capturePhoto'});
}

 });

 Ext.reg('CameraView', LoginForm.views.CameraView);


    // JavaScript Document
Ext.regController('Camera', {





            onBodyLoad:function ()
            {

                document.addEventListener("deviceready",onDeviceReady,false);
            },

            /* When this function is called, PhoneGap has been initialized and is ready to roll */
           onDeviceReady: function ()
            {
                phoneGapReady.innerHTML = "PhoneGap is Ready";


            },

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

                // Get image handle
                //
                var myImage = document.Ext.getCmp('myImage');

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

                // Show the captured photo
                // The inline CSS rules are used to resize the image
                //
                myImage.src = "data:image/jpeg;base64," + imageData;

            },                

             onPhotoURISuccess:function(imageURI) {
                // Uncomment to view the image file URI
                // console.log(imageURI);

                // Get image handle
                //


                var myImage = document.Ext.getCmp('myImage');

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

                // Show the captured photo
                // The inline CSS rules are used to resize the image
                //
                myImage.src = imageURI;
                return(myImage.src);
            },

            // A button will call this function
            //
           capturePhoto: function () {
                console.log("inside capture photo");
                // Take picture using device camera and retrieve image as base64-encoded string
                try {
                    console.log("inside try capture photo");
                    var pictureSource=navigator.camera.PictureSourceType;
                    var destinationType=navigator.camera.DestinationType;
                    navigator.camera.getPicture(this.onPhotoURISuccess, onFail, { quality: 50,
                                                destinationType: destinationType.FILE_URI });

                }
                catch (err)
                {
                    alert(err);
                }
            },

           onFail: function (message) {

                alert('Failed: ' + message);
            },
             backButton:function()
            {


            }
});

回答1:

I have used following code to display captured image on sencha touch xtype: image:

In view I have added following code to create image xtype:

              {
                xtype: 'image',
                width: 136,
                height: 102,
                html: "",
                id: 'cameraImage'
              },

In my Controller I have used following code:

config : {
    refs:{
      cameraImage: '#cameraImage'
    },
    control :{
      'cameraImage': {
        tap: 'launchCamera'
      }
    }
  },

launchCamera: function(item, event) {
  var imageButton='';
  var controller = this;
  navigator.camera.getPicture(
    function(imageURI) {
      accident_image_paths[target] = imageURI;
      imageButton = controller.getCameraImage1();
      imageButton.setHtml("<img src='"+imageURI+" 'class='imageToPanel'/>");
    },
    function(message) {
      Ext.Msg.alert('Failed','Failed because: ' + message);
    },
    {
      quality: 50,
      destinationType: Camera.DestinationType.FILE_URI,
      sourceType : Camera.PictureSourceType.CAMERA,
      allowEdit: false,
      saveToPhotoAlbum: true
    }
 );

}

Note: Don't forget to add <script type="text/javascript" src="cordova-2.x.x.js"></script> in your index.html

Hope this will help you...

回答2:

Try to replace this line:

var myImage = document.Ext.getCmp('myImage');

with this one:

var myImage = Ext.get('myImage');

回答3:

did you try

myImage.setSrc('data:image/jpeg;base64,'+imageData

来源：https://stackoverflow.com/questions/9563340/phonegap-camera-and-sencha-touch-view