phonegap的照相机 API

最新推荐文章于 2024-05-08 23:34:46 发布

aojiu4000

最新推荐文章于 2024-05-08 23:34:46 发布

阅读量83

点赞数

文章标签：移动开发 javascript ViewUI

原文链接：http://www.cnblogs.com/LO-ME/p/4579641.html

版权

一、 Camera Api 简单介绍

　　Camera 选择使用摄像头拍照，或从设备相册中获取一张照片。图片以 base64 编码的字符串或图片 URI 形式返回。

　　方法：

　　　　1. camera.getPicture 拍照获取相册图片 navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );

　　　　　　cameraSuccess：提供图像数据的 onSuccess 回调函数。

　　　　　　cameraError：提供错误信息的 onError 回调函数。

　　　　　　cameraOptions：定制摄像头设置的可选参数

　　　　2. camera.cleanup 清除拍照后设备的缓存图片

　　　　　　navigator.camera.cleanup( cameraSuccess, cameraError );

　　　　3.cameraOptions 参数：定制摄像头设置的可选参数。

　　　　　　quality : 存储图像的质量，范围是[0,100]。

　　　　　　destinationType :选择返回数据的格式。

　　　　　　　　　　DATA_URL :0, // Return image as base64-encoded string

　　　　　　　　　　FILE_URI :1, // Return image file URI

　　　　　　　　　　NATIVE_URI :2 // Return image native URI (e.g. assets-library:// on iOS or content:// on Android)

　　　　　　sourceType :设定图片来源。data:image/jpeg;base64,

　　　　　　　　　　PHOTOLIBRARY :0,//拍完照后图片的路劲从图库中获取

　　　　　　　　　　CAMERA :1,//拍完照后图片的路劲从设备照相机中获取

　　　　　　　　　　SAVEDPHOTOALBUM :2//拍完照后图片的路劲从相册中获取

　　　　　　allowEdit :在选择图片进行操作之前允许对其进行简单编辑。(好像只有 ios 支持，在 Android 中，忽略 allowEdit 参数。)

　　　　　　encodingType :选择返回图像文件的编码方 encodingType: Camera.EncodingType.JPEG

　　　　　　targetWidth :以像素为单位的图像缩放宽度指定图片展示的时候的宽度

　　　　　　targetHeight :以像素为单位的图像缩放高度指定图片展示的时候的高度

　　　　　　saveToPhotoAlbum:拍完照片后是否将图像保存在设备上的相册

　　　　　　mediaType 设置选择媒体的类型

　　　　　　　　　　PICTURE:0, // allow selection of still pictures only.DEFAULT. Will return format specified via DestinationType

　　　　　　　　　　VIDEO:1, // allow selection of video only, WILL ALWAYS RETURN FILE_URI

　　　　　　　　　　ALLMEDIA :2 // allow selection from all media types

　　　　　　cameraDirection 选择前置摄像头还是后置摄像头

　　　　　　　　　　BACK :0, // Use the back-facing camera

　　　　　　　　　　FRONT :1 // Use the front-facing camera

　　　　Camera.PictureSourceType.PHOTOLIBRARY 或 Camera.PictureSourceType.SAVEDPHOTOALBUM 都会显示同一个相集。

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>phonegap_device_network_notification01</title>
<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="../jquery.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script src="../cordova.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
            document.addEventListener("deviceready", myDeviceReadyListener, false);
    });    
     function myDeviceReadyListener(){
         $('#btn_getPic').click(function(){
             navigator.camera.getPicture(onSuccess, onFail, { 
                quality: 70,
                destinationType: Camera.DestinationType.DATA_URL, //以文件地址返回url  这里进行了编码，成功拍照获取图片路径对应的方式如下
                //sourceType:Camera.PictureSourceType.Camera, //摄像机获取，调用拍照
                sourceType:Camera.PictureSourceType.PHOTOLIBRARY, //从图库中选取图片，不用调用拍照
                targetWidth:200,
                targetHeight:200
            });
                         
         })
    }     
    //成功  回调函数里包含图片的地址
    function onSuccess(imageURI){    
        alert(imageURI);
        $('#img_pic').css('display','block');        
        $('#img_pic').attr("src","data:image/jpeg;base64," + imageURI);
        //image.src = "data:image/jpeg;base64," + imageData;
        
        
    }

    //失败  回调函数李包含失败返回的信息
    function onFail(message) {
        alert('Failed because: ' + message);
    }

 
</script>
</head> 
<body>
<div data-role="page">
        <div data-role="header">
            <h1>Camera</h1>
        </div>
        <div data-role="content">
            <img style="dispaly:none" id="img_pic"/>
            <a id="btn_getPic" href="#" data-role="button">拍照</a>
        </div>
        <div data-role="footer">
            <h4>&nbsp;</h4>
        </div>
</div>

</body>
</html>

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>phonegap_device_network_notification01</title>
<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="../jquery.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script src="../cordova.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
            document.addEventListener("deviceready", myDeviceReadyListener, false);
    });    
     function myDeviceReadyListener(){
         $('#btn_getPic').click(function(){
             navigator.camera.getPicture(onSuccess, onFail, { 
                 quality: 70,
                destinationType: Camera.DestinationType.FILE_URI, //以文件地址返回url
                sourceType:Camera.PictureSourceType.Camera,
                targetWidth:300,
                targetHeight:300
            });
                         
         })
    }     
    //成功
    function onSuccess(imageURI) {
        alert(imageURI);
        $('#img_pic').css('display','block');        
        $('#img_pic').attr("src",imageURI);//这种获取图片路径的方式对应的是destinationType: Camera.DestinationType.FILE_URI
        
    }

    //失败
    function onFail(message) {
        alert('Failed because: ' + message);
    }

 
</script>
</head> 
<body>
<div data-role="page">
        <div data-role="header">
            <h1>Camera</h1>
        </div>
        <div data-role="content">
            <img style="dispaly:none" id="img_pic"/>
            <a id="btn_getPic" href="#" data-role="button">拍照</a>
        </div>
        <div data-role="footer">
            <h4>&nbsp;</h4>
        </div>
</div>

</body>
</html>

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>phonegap_device_network_notification01</title>
<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="../jquery.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script src="../cordova.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
            document.addEventListener("deviceready", myDeviceReadyListener, false);
    });    
     function myDeviceReadyListener(){
         $('#btn_getPic').click(function(){
             navigator.camera.getPicture(onSuccess, onFail, { 
                 quality: 70,
                destinationType: Camera.DestinationType.DATA_URL, //以文件地址返回url
                sourceType:Camera.PictureSourceType.Camera,
                targetWidth:100,
                targetHeight:100
            });
                         
         })
    }     
    //成功
    function onSuccess(imageURI){    
        alert(imageURI);
        $('#img_pic').css('display','block');        
        $('#img_pic').attr("src","data:image/jpeg;base64," + imageURI);
        //image.src = "data:image/jpeg;base64," + imageData;
        
        
    }

    //失败
    function onFail(message) {
        alert('Failed because: ' + message);
    }

 
</script>
</head> 
<body>
<div data-role="page">
        <div data-role="header">
            <h1>Camera</h1>
        </div>
        <div data-role="content">
            <img style="dispaly:none" id="img_pic"/>
            <a id="btn_getPic" href="#" data-role="button">拍照</a>
        </div>
        <div data-role="footer">
            <h4>&nbsp;</h4>
        </div>
</div>

</body>
</html>

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>phonegap_device_network_notification01</title>
<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="../jquery.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script src="../cordova.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
            document.addEventListener("deviceready", myDeviceReadyListener, false);
    });    
     function myDeviceReadyListener(){
         //从相机拍照获取 base64 编码方式返回
         $('#btn_getPic').click(function(){
             navigator.camera.getPicture(onSuccess1, onFail, { 
                 quality: 70,
                destinationType: Camera.DestinationType.DATA_URL, //以文件地址返回url
                sourceType:Camera.PictureSourceType.Camera,
                targetWidth:100,
                targetHeight:100
            });
                         
         })
         //从图库获取 url
         $('#btn_getLibiaryPic').click(function(){
             navigator.camera.getPicture(onSuccess2, onFail, { 
                 quality: 70,
                destinationType: Camera.DestinationType.FILE_URL, //以文件地址返回url，如果选择的媒体类型是视频，只能是这个方式：FILE_URL
                sourceType:Camera.PictureSourceType.PHOTOLIBRARY,
                mediaType:Camera.MediaType.VIDEO,
                targetWidth:100,
                targetHeight:100
            });
                         
         })
         
         
    }     
    //成功 相机
    function onSuccess1(imageURI){    
        alert(imageURI);
        $('#img_pic').css('display','block');        
        $('#img_pic').attr("src","data:image/jpeg;base64," + imageURI);
        //image.src = "data:image/jpeg;base64," + imageData;
        
    }
    //成功 图库
    function onSuccess2(imageURI){    
        alert(imageURI);
        //$('#img_pic').css('display','block');        
       // $('#img_pic').attr("src",imageURI);
        
         $("#videocontainer").append("<video height=240 width=300 controls='controls' src='"+imageURI+"' >your browder doesn't support video tag</video>");
        //image.src = "data:image/jpeg;base64," + imageData;
        
    }

    //失败
    function onFail(message) {
        alert('Failed because: ' + message);
    }

 
</script>
</head> 
<body>
<div data-role="page">
        <div data-role="header">
            <h1>Camera</h1>
        </div>
        <div data-role="content">
            <img style="dispaly:none" id="img_pic"/>
            <a id="btn_getPic" href="#" data-role="button">拍照</a>
            <a id="btn_getLibiaryPic" href="#" data-role="button">本地预览</a>
            <div id="videocontainer">
            </div>
        </div>
        <div data-role="footer">
            <h4>&nbsp;</h4>
        </div>
</div>

</body>
</html>

转载于:https://www.cnblogs.com/LO-ME/p/4579641.html

aojiu4000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
phonegap的照相机 API

一、 Camera Api 简单介绍　　Camera 选择使用摄像头拍照，或从设备相册中获取一张照片。图片以 base64 编码的字符串或图片 URI 形式返回。　　方法：　　　　1. camera.getPicture 拍照获取相册图片 navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOpt...
复制链接

扫一扫