Phonegap Camera API - 无法读取未定义的属性“DATA_URL”
Posted
技术标签:
【中文标题】Phonegap Camera API - 无法读取未定义的属性“DATA_URL”【英文标题】：Phonegap Camera API - Cannot read property 'DATA_URL' of undefined 【发布时间】：2014-05-15 01:49:07 【问题描述】：我正在使用 Phonegap 创建一个 android 应用。
我已经使用他们网站上的命令安装了 phonegap。
使用 SDK 和模拟器，一切都已启动并运行。
现在，当我从他们的网站运行示例相机脚本以使其正常工作时，我开始对其进行自定义。
每次我运行下面的代码时（即使我有链接到 phonegap.js 的文件）它总是抛出一个错误。我的意思是脚本运行到 html 并显示按钮，但是当单击按钮时没有任何反应，并且在日志中显示：无法读取未定义的属性 'DATA_URL'。
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for ios 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="phonegap.js"></script>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
<title>Retouch</title>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for PhoneGap to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);
// PhoneGap is ready to be used!
//
function onDeviceReady()
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(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 onPhotoFileSuccess(imageData)
// Get image handle
console.log(JSON.stringify(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 = 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()
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 );
// A button will call this function
//
function getPhoto(source)
// Retrieve image file location from specified source
navigator.Camera.getPicture(onPhotoURISuccess, onFail,
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: pictureSource
);
// Called if something bad happens.
//
function onFail(message)
alert('Failed because: ' + message);
</script>
</head>
<body>
<!-- Navigation bar -->
<div class="fixed">
<nav class="top-bar fixed" data-topbar>
<ul class="title-area">
<li class="name">
<h1 class="navmsg">
<script>
var Digital=new Date()
var hours=Digital.getHours()
if (hours>=5&&hours<=11)
document.write('<b>Good Morning.</b>')
else if (hours==12)
document.write('<b>Good Afternoon.</b>')
else if (hours>=13&&hours<=17)
document.write('<b>Good Afternoon.</b>')
else if (hours>=18&&hours<=20)
document.write('<b>Good Evening.</b>')
else if (hours>=21&&hours<=11)
document.write('<b>Hello!</b>')
else
document.write('<b>Hello!</b>')
</script>
</h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#">Account</a></li>
</ul>
</nav>
</div>
<button onclick="capturePhotoWithData();">Capture Photo With Image Data</button> <br>
<button onclick="capturePhotoWithFile();">Capture Photo With Image File URI</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="" />
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>`
我已尝试使用以下内容：
<script type="text/javascript" src="phonegap.js"></script>
和
<script type="text/javascript" src="cordova.js"></script>
似乎没有任何效果。
我在 capturePhoto() 和 capturePhotoEdit() 中更改了以下内容：
destinationType.DATA_URL
到
Camera.DestinationType.DATA_URL
功能仍然没有运气。我怀疑它与cordova插件和phonegap有关，因为脚本中只包含phonegap.js。我还在阅读 config.xml 中的设置，这是我按照文档通过命令行完成的（除非我做错了）。
我已经通过 CL 构建了应用程序：
phonegap build android
添加了cordova-2.5.0.js 和destinationType.FILE_URI 的以下代码已成功启用getPhoto() 函数并允许我显示库/相册中的照片。
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="phonegap.js"></script>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
<title>Retouch</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for Cordova to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);
// Cordova is ready to be used!
//
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
//alert(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)
alert("inside large image")
// 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.FILE_URI );
// 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.FILE_URI );
// 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>
<!-- Navigation bar -->
<div class="fixed">
<nav class="top-bar fixed" data-topbar>
<ul class="title-area">
<li class="name">
<h1 class="navmsg">
<script>
var Digital=new Date()
var hours=Digital.getHours()
if (hours>=5&&hours<=11)
document.write('<b>Good Morning.</b>')
else if (hours==12)
document.write('<b>Good Afternoon.</b>')
else if (hours>=13&&hours<=17)
document.write('<b>Good Afternoon.</b>')
else if (hours>=18&&hours<=20)
document.write('<b>Good Evening.</b>')
else if (hours>=21&&hours<=11)
document.write('<b>Hello!</b>')
else
document.write('<b>Hello!</b>')
</script>
</h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#">Account</a></li>
</ul>
</nav>
</div>
<button onclick="capturePhotoWithData();">Capture Photo With Image Data</button> <br>
<button onclick="capturePhotoWithFile();">Capture Photo With Image File URI</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="" />
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
我尝试将“destinationType.FILE_URI”添加到 capturePhoto() 和 capturePhotoEdit() 函数，但它们似乎仍然不起作用。
我现在尝试了以下三种：
destinationType.FILE_URI
destinationType.DATA_URI
Camera.desitnationType.DATA_URI
它们似乎都没有什么不同。
【问题讨论】：
【参考方案1】：这是一个 Javascript 错误。您正在尝试访问未定义变量的属性。这一行（在capturePhoto 和capturePhotoEdit 方法中）：
destinationType.DATA_URL
应该是：
Camera.DestinationType.DATA_URL
还有一件事：使用 Cordova，手头有文档总是好的，每次使用新插件或升级到新版本时都可以查看它们（它们往往会更改 API经常，因此在 Google 中找到的示例通常显示遗留代码）。这里有Camera plugin documentation。
【讨论】：
我应该包含cordova.js还是phonegap.js？自从我使用 phonegap 命令创建应用程序以来，它并没有自动将 cordova.js 包含在我的项目目录中。 我曾经使用模板示例项目创建项目，所以我对新的 CLI 命令不熟悉。但是由于 cordova.js 是特定于平台的，并且create 命令没有平台作为参数，我想它会在稍后添加到 build 命令中。
所以我不需要手动添加它？它将通过 build.xml 处理？我是否需要在构建文件中添加任何内容，因为我已手动将 cordova 的插件行添加到我的 config.xml 文件中。
老兄，我复制粘贴了你的“Camera.DestinationType.DATA_URL”，但它应该是，最后是“I”。
根据 phonegap 和 cordova 的文档，可能的值是 DATA_URL、FILE_URI 和 NATIVE_URI。【参考方案2】：
就我而言，当我暂停执行时，Camera 有 getPicture() 方法，但没有 DestinationType 和 PictureSourceType 属性。
$scope.tomarFoto = function()
$ionicPlatform.ready(function()
var options =
quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA
;
$cordovaCamera.getPicture(options).then(function (imageData)
$scope.cameraimage = "data:image/jpeg;base64," + imageData;
, function (err)
console.log('Failed because: ' + message);
);
);
【讨论】：
【参考方案3】：更新
只是我最近遇到了同样的问题。
如果您添加了相机插件和所需的所有权限，主要是您完成了所有Phonegap Api 步骤。我认为您的解决方案通过转到您的项目文件夹并执行phonegap build 或phonegap build app_platform。
首先保存您的项目数据，因为命令行会重置项目的结构并删除您添加的文件。
让我知道这是否也适合你，祝你好运。
【讨论】：
我没有对 Cordova 进行任何操作，但我通过终端安装了 Phonegap，创建了一个项目，然后将相机脚本实现到一个名为 camera.html 的文件中。我按原样添加了 JS 脚本并运行了该脚本。日志不断显示四个函数的错误。 我运行了'phonegap build android'，包构建成功，但仍然无法访问相机。 那么这只是一个不同的问题，会出现同样的错误 我的资料库和相册功能都在工作了，但是相机还是不行。 在最后机会尝试一下：找到camera.js 并像phonegap.js 一样导入到您的html以上是关于Phonegap Camera API - 无法读取未定义的属性“DATA_URL”的主要内容，如果未能解决你的问题，请参考以下文章
Phonegap Vue js Android将CAMERA图像上传到API服务器
从PhoneGap Camera API返回时如何隐藏iOS7状态栏？