`
fanfanlovey
  • 浏览: 71673 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

三、phoneGap中使用相机功能

phoneGapxcode html5camra 
阅读更多
  今天用了phoneGap的camera功能，操作很简单，下面记录操作步骤，方便以后查看，详细解说可以参考官网api，
地址为：http://docs.phonegap.com/en/2.3.0/cordova_camera_camera.md.html#Camera
  1、创建项目，这项目叫cameraTest;
  2、修改config.xml文件：
   在<plugins></plugins>之间看下是否有下面配置参数信息，如有则OK，没有需要加上
<plugin name="Compass" value="CDVLocation" />

  3、编写代码：
    在index.html下面写入如下代码 
<!DOCTYPE html>
<html>
  <head>
    <title>Capture Photo</title>

    <script type="text/javascript" charset="utf-8" src="js/cordova-2.3.0.js"></script>
    <script type="text/javascript" charset="utf-8">
<!DOCTYPE html>
<html>
  <head>
    <title>Capture Photo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    var pictureSource;  //图片来源
    var destinationType; //返回的图片数据格式

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

    // 设备初始化之后调用
    function onDeviceReady() {
        pictureSource=navigator.camera.PictureSourceType;
        destinationType=navigator.camera.DestinationType;
    }
    
    //拍照之后成功调用方法
    function onPhotoDataSuccess(imageData) {
      var smallImage = document.getElementById('smallImage');

      smallImage.style.display = 'block';
	  //显示拍摄的照片
      smallImage.src = "data:image/jpeg;base64," + imageData;
    }
    //从相册中选择照片成功之后调用方法
    function onPhotoURISuccess(imageURI) {
      var largeImage = document.getElementById('largeImage');
      largeImage.style.display = 'block';
      largeImage.src = imageURI;
    }

    //获取拍照照片
    function capturePhoto() {
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
        destinationType: destinationType.DATA_URL });
    }

	//获取拍照照片，可以对其进行编辑
    function capturePhotoEdit() {
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
        destinationType: destinationType.DATA_URL });
    }

    //从相册中获取照片
    function getPhoto(source) {
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
        destinationType: destinationType.FILE_URI,
        sourceType: source });
    }

    //拍照取消或者拍照失败调用函数
    function onFail(message) {
      alert('Failed because: ' + message);
    }

    </script>
  </head>
  <body>
    <button onclick="capturePhoto();">只获取拍照图片</button> <br><br><br>
    <button onclick="capturePhotoEdit();">获取拍照图片并且可以编辑</button><br><br> <br>
    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">从相册中获取照片</button><br><br><br>
    <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">从拍摄的照片中获取照片</button><br><br><br>
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
    <img style="display:none;" id="largeImage" src="" />
  </body>
</html>
    </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>

下面对涉及到的一些参数信息做一些备注
1、cameraOptions
      quality：存储图像的质量，范围是[0,100]。(数字类型)
       destinationType：选择返回数据的格式。通过navigator.camera.DestinationType进行定义。(数字类型) 
Camera.DestinationType = {   
                DATA_URL : 0, //返回Base64编码字符串的图像数据   
                   FILE_URI : 1 //返回图像文件的URI   
              }

2、sourceType：设定图片来源。
    通过nagivator.camera.PictureSourceType进行定义。(数字类型)
   
      Camera.PictureSourceType = {   
          PHOTOLIBRARY : 0,   //来源相册
            CAMERA : 1,         //默认，来源相机
            SAVEDPHOTOALBUM : 2  //来源拍摄的照片 
     }
  
3、allowEdit：
      在选择图片进行操作之前允许对其进行简单编辑。(布尔类型)
4、EncodingType：
     选择返回图像文件的编码方式，通过navigator.camera.EncodingType进行定义。(数字类型)
   
Camera.EncodingType = {   
       JPEG : 0, // 返回JPEG格式图片   
         PNG : 1 // 返回PNG格式图片   
      };

5、camera.cleanup
清空使用摄像头拍照时候产生的缓存文件.
当我们使用如下参数的时候会产生临时文件
Camera.sourceType = Camera.PictureSourceType.CAMERA and Camera.destinationType = Camera.DestinationType.FILE_URI
通过调用下列方法清除缓存
navigator.camera.cleanup( cameraSuccess, cameraError );
可以自定义cameraSuccess，cameraError 进行相关的操作
分享到：
| 二、phoneGap项目中使用二维码扫描功能
评论
1 楼 tda7088 2016-07-05  
赞一个，正好解决了我的问题
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics