三、phoneGap中使用相机功能

最新推荐文章于 2025-08-04 13:33:00 发布

原创最新推荐文章于 2025-08-04 13:33:00 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#phoneGap #xcode html5 #camra

PhoneGap 专栏收录该内容

3 篇文章

订阅专栏

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

<plugin name="Compass" value="CDVLocation" />

[b] 3、编写代码：[/b]
在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>

[size=large]下面对涉及到的一些参数信息做一些备注[/size]
[b]1、cameraOptions[/b]
quality：存储图像的质量，范围是[0,100]。(数字类型)
destinationType：选择返回数据的格式。通过navigator.camera.DestinationType进行定义。(数字类型)

Camera.DestinationType = {   
                DATA_URL : 0, //返回Base64编码字符串的图像数据   
                   FILE_URI : 1 //返回图像文件的URI   
              }

[b]2、sourceType：设定图片来源[/b]。
通过nagivator.camera.PictureSourceType进行定义。(数字类型)


      Camera.PictureSourceType = {   
          PHOTOLIBRARY : 0,   //来源相册
            CAMERA : 1,         //默认，来源相机
            SAVEDPHOTOALBUM : 2  //来源拍摄的照片 
     }

[b]3、allowEdit：[/b]
在选择图片进行操作之前允许对其进行简单编辑。(布尔类型)
[b]4、EncodingType：[/b]
选择返回图像文件的编码方式，通过navigator.camera.EncodingType进行定义。(数字类型)

Camera.EncodingType = {   
       JPEG : 0, // 返回JPEG格式图片   
         PNG : 1 // 返回PNG格式图片   
      };

[b]5、camera.cleanup[/b]
清空使用摄像头拍照时候产生的缓存文件.
当我们使用如下参数的时候会产生临时文件
Camera.sourceType = Camera.PictureSourceType.CAMERA and Camera.destinationType = Camera.DestinationType.FILE_URI
通过调用下列方法清除缓存
navigator.camera.cleanup( cameraSuccess, cameraError );
可以自定义cameraSuccess，cameraError 进行相关的操作