Nic*_*ick 1 phonegap-plugins cordova cordova-plugins
我是PhoneGap的新手,正在试图弄清楚如何使用捕获插件.我正在使用Cordova 3.5.0.我已成功运行以下命令:
cordova plugin add org.apache.cordova.media-capture
我已经阅读了HTML页面中包含cordova.js或phonegap.js的示例.但是,Cordova创建的项目层次结构中不存在任何文件,因此我不知道如何包含它.我还读过这个文件是由Cordova在构建时自动注入的.因此,只要包含任何JavaScript文件,我只包含我自己的JavaScript文件.在JavaScript文件中,我有代码执行此操作以进行测试:
alert(navigator.device);
navigator.device.capture.captureImage(function(files) {
alert(files);
}, function(error) {
alert(error);
});
第一个警报显示navigator.device未定义.我在android模拟器上运行这个应用程序.要运行该应用程序,我正在做:
cordova emulate android
我认为我需要包含或设置一些东西才能使其正常工作.任何帮助是极大的赞赏.
欢迎来到科尔多瓦!
首先,我建议你检查一下,无论你是否正确安装了npm等.在这里查看教程 - > CLI-Guide < - .之后,您应该在终端上构建一个全新的项目.您应该使用这些命令来执行此操作 - >
cd ~/desktopcordova create media media.example.com mediacd mediacordova platform add androidcordova plugin add org.apache.cordova.camera (不是媒体捕捉) cordova plugin add org.apache.cordova.console (不要使用警报,使用控制台更容易:-))cordova build所以,现在打开你的文件夹.应该有一个目录media/platforms/android/assets/www,在这个目录中你应该找到你的cordova.js和cordova_plugins.js.
下一个问题:你的相机!
安装完所有像我说的,并检查你的$PATH变量(echo $PATH在终端)等你可以尝试这个代码在你index.html检查,相机插件是否工作:
<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>
<script type="text/javascript" charset="utf-8" src="cordova.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 in-line 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 in-line 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>
所以...也许你现在试着为我测试我的建议,并给我一个反馈,如果它有效,或者我可以帮助你更多:-)!
编辑Nick的答案 - >标准Cordova index.html代码:
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
<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" />
<meta name="msapplication-tap-highlight" content="no" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
3463 次 |
| 最近记录： |