phonegap照相插件的使用

照如下步骤就能生产出代码:

打开cmd 控制台

1 使用命令行 建立phonegap工程 

2 进入到phonegap工程下的plugins 文件夹当中  ,使用命令行下载官方插件 ;(输入命令: cordova plugin add org.apache.cordova.camera)

4 添加生成  android或者IOS 工程 ;android命令如下cordova platform add android     (注:oc的把android换成ios)

5 在命令行输入cordova build

6 最后 将生成的工程导入编辑器(我用的eclipse)

在assets/www目录下在index.html中添加 javascript 调用语句.

 

<!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">    
    var pictureSource;   // picture source 
    var destinationType; // sets the format of returned value    
    // Wait for device API libraries to load    //   
    document.addEventListener("deviceready",onDeviceReady,false);    
        // device APIs are available    //    
        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      // 
        console.log(imageData);      
        // Get image handle      //      
        var smallImage = document.getElementById('smallImage');      
        // Unhide image elements      //     
        smallImage.style.display = 'block';      
        // Show the captured photo      // The in-line 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      // 
        console.log(imageURI);      
        // Get image handle      //     
        var largeImage = document.getElementById('largeImage');      
        // Unhide image elements      //    
        largeImage.style.display = 'block';      
        // Show the captured photo      // The in-line 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 });    }    
        // 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="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> 
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />  
    <img style="display:none;" id="largeImage" src="" />  

</body>
</html>

 

posted @ 2014-12-08 11:18  阳光小屋  阅读(182)  评论(0编辑  收藏  举报