我对 Intel-XDK 很陌生。
使用 AppStarter 框架构建一个新的应用程序。
我正在尝试制作一个非常基本的应用程序，它在一个“页面”上拍照，然后允许我在另一个页面上查看图像，我还想在其中捕获每个图像的详细信息。
到目前为止，我的想法是，您实际上只使用 XDK 构建了一个页面，即，所有内容都在 index.html 中，而您的“页面”只是 div 的。
我成功地获得了第一页来唤起相机，但我无法将图像“保存”并可以在我的“第二页”上查看。在我的iPhone上，测试这个应用程序时，我可以拍照，但它没有保存在任何地方，在我的Android设备上，它保存了图像，但将其命名为“test.jpg”并保存到sdcard的根目录，而不是通常的 DCIM 文件夹。
我尝试使用 onclick 事件来启动这些功能。
欢迎任何指点！
<!DOCTYPE html>
<html><!--HTML5 doctype-->
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Pragma" content="no-cache">
<script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
<script type="text/javascript" language="javascript">
// This event handler is fired once the intel libraries are ready
function onDeviceReady() {
//hide splash screen now that our app is ready to run
intel.xdk.device.hideSplashScreen();
setTimeout(function () {
$.ui.launch();
}, 50);
}
//initial event handler to detect when intel is ready to roll
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
document.addEventListener("intel.xdk.camera.picture.add",onSuccess);
document.addEventListener("intel.xdk.camera.picture.busy",onSuccess);
document.addEventListener("intel.xdk.camera.picture.cancel",onSuccess);
function capturePhoto() {
intel.xdk.camera.takePicture(50,true,"jpg");
}
function onSuccess(evt) {
if (evt.success == true)
{
// create image
var image = document.createElement('img');
image.src=intel.xdk.camera.getPictureURL(evt.filename);
image.id=evt.filename;
document.body.appendChild(image);
}
else
{
if (evt.message != undefined)
{
alert(evt.message);
}
else
{
alert("error capturing picture");
}
}
}
function showImages() {
var arrPictureList = intel.xdk.camera.getPictureList();
for (var x=0;x<arrPictureList.length;x++)
{
// create image
var newImage = document.createElement('img2');
newImage.src=intel.xdk.camera.getPictureURL(arrPictureList[x]);
newImage.setAttribute("style","width:100px;height:100px;");
newImage.id=document.getElementById("img_" + arrPictureList[x]);
document.body.appendChild(newImage);
}
}
</script>
<script src="js/appframework.ui.min.js"></script>
<script>
$.ui.autoLaunch = false;
$.ui.useOSThemes = true; //Change this to false to force a device theme
$.ui.blockPageScroll();
$(document).ready(function () {
if ($.ui.useOSThemes && !$.os.ios && $("#afui").get(0).className !== "ios")
$("#afui").removeClass("ios");
});
</script>
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/af.ui.css" rel="stylesheet" type="text/css">
</head>
<div id="afui" class="ios">
<div id="header"></div>
<div id="content" style="">
<div class="panel" title="PhotoTag" data-nav="nav_0" id="main" selected="selected"
style="" data-appbuilder-object="page">
<ul class="list" data-appbuilder-object="list" style="">
<li><a href="#page_1">Take Picture</a>
</li>
<li><a href="#page_2">View Pictures</a>
</li>
<li><a href="#page_3">Help</a>
</li>
</ul>
</div>
<div class="panel" title="Take Picture" data-nav="nav_0" id="page_1" data-appbuilder-object="page"
style="">
<a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
onclick="capturePhoto();">Take Picture</a>
</div>
<div class="panel" title="View Picture" data-nav="nav_0" id="page_2" data-appbuilder-object="page"
style="">
<a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
onclick="showImages();">Show Pictures</a>
</div>
<div class="panel" title="Help" data-nav="nav_0" id="page_3" data-appbuilder-object="page"
style=""></div>
</div>
<div id="navbar">
<a href="#main" class="icon home">Home</a>
</div>
<header id="header_0" data-appbuilder-object="header">
<a id="backButton" href="#" class="button back" style="visibility: visible; ">Back</a>
<h1 id="pageTitle" class="">test</h1>
</header>
<nav id="nav_0" data-appbuilder-object="nav">
<h1>Side Menu</h1>
</nav>
</div>
</html>