Phonegap 3.0 拍照 出错的说明

时间:2023-03-08 18:12:03

在官方3.0 提供的摄像机操作例子是不成功的,因为该例子没有说明摄像机操作需要添加Plugin。

添加插件方法(安装cordova3.0时必须使用官方命令行方式,通过nodejs安装,且装上了git):

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git 

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media-capture.git 

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git

最后附上官方操作代码:

<!DOCTYPE html>

<html>

  <head>

    <title>Capture Photo</title>

<script type="text/javascript" charset="utf-8" src="cordova-3.0.0.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 inline 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 inline 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>