phoneGap攝像頭和sencha觸摸視圖

我必須將phoneGap攝像頭api和sencha touch相結合。phoneGap攝像頭和sencha觸摸視圖

我已經創建了一個視圖CameraView和控制器Camera，但我不知道如何在我的視圖中顯示攝像頭捕獲的圖像。這一個

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

：

// 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() 
      { 


      } 
});

來源

2012-03-05 Shruti Nair

試圖取代這一行

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

來源

2012-03-05 19:06:17

你嘗試

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

來源

2012-07-27 13:38:00

我用下面的代碼顯示捕獲在sencha觸摸xt上的圖像YPE：圖像：

在視圖我已經添加以下代碼來創建圖像的xtype：

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

以我控制器我已經使用以下代碼：

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

}

注：不要忘記添加<script type="text/javascript" src="cordova-2.x.x.js"></script>在您的index.html

希望這將幫助你...

來源

2013-08-30 11:09:21

phoneGap攝像頭和sencha觸摸視圖

回答

相關問題