Question

我是Intel-XDK的新手。

使用AppStarter框架构建新的应用程序。

我试图制作一个非常基本的应用程序，在一个＆＃34;页面＆＃34;上拍照，然后允许我在另一个页面上查看图像，我也想要捕获每张图片的详细信息。

到目前为止，我得到的想法是，您只使用XDK构建一个页面，即一切都在index.html中，以及您的＆＃34;页面＆＃34;只是div。

我成功地获得了第一页来调用相机，但我无法将图像转移到＆＃34;保存＆＃34;并且可以在我的第二页上查看＆＃34;然而。在我的iPhone上，当测试这个应用程序时，我可以拍照，但它没有保存在任何地方，在我的Android设备上，它保存图像，但命名为＆＃34; test.jpg＆＃34;它保存到SD卡的根目录，而不是通常的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>

Answer 1

好吧，我设法做对了。

到目前为止，这段代码完成了我需要的工作，然后将图片放在一个“页面”上，然后将其显示在另一个页面上。

现在遇到使用localStorage的问题 - 发布了一个新问题。

<!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(event) 
{
    if (event.success === true)
    {
        var imagesrc = intel.xdk.camera.getPictureURL(event.filename);
        var pic1 = document.getElementById("pic1");
        pic1.src = imagesrc;
        localStorage.imagesrc = imagesrc;

   }
    else
    {
        if (event.message !== undefined)
        {
            alert(event.message);
        }
        else
        {
            alert("error capturing picture");
        }
    }
}

function showPicture()
{
    var picture = document.getElementById("pic2");
    var pic1src = localStorage.imagesrc;
    picture.src = pic1src;
    document.form2.locationview.value = localStorage.location;
    document.form2.titleview.value = localStorage.title;
    document.form2.metadataview.value = localStorage.metadata;
}

function saveForm()
    {
    localStorage.location = document.form1.location.value;
    localStorage.title = document.form1.title.value;
    localStorage.metadata = document.form1.metadata.value;    

    }

function updateForm()
    {
    localStorage.location = document.form2.locationview.value;
    localStorage.title = document.form2.titleview.value;
    localStorage.metadata = document.form2.metadataview.value;      
    }

function showStorage()
    {
    document.getElementById("page_3").innerHTML = localStorage.location;
    }
</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="PhotoTagger" data-nav="nav_0" id="main" selected="selected"
        style="background-image: url(images/splash.jpg);"
        data-appbuilder-object="page" data-footer="footer_1">
            <div class="centerbutton">
                <a class="button" href="#page_1" data-appbuilder-object="button" data-transition="slide"
                id="button_1" onclick="capturePhoto();">Store data in EXIF</a>
            </div>
        </div>
        <div class="panel" title="Take Picture" data-nav="nav_0" id="page_1" data-appbuilder-object="page"
        style="" data-footer="footer_1">
            <form style="width: 100%;min-height: 50px;" data-appbuilder-object="form" class=""
            id="form1" name="form1">
                <img src="images/EmptyBox-Phone.png" id="pic1" width="150px" height="200px">
                <div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
                    <label for="">Location</label>
                    <input type="text" style="float:left;" id="location" placeholder="">
                </div>
                <div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
                    <label for="">Title</label>
                    <input type="text" style="float:left;" id="title" placeholder="">
                </div>
                <div class="textarea_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="textarea">
                    <label for="">MetaData</label>
                    <textarea id="metadata"></textarea>
                </div>
                <a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
                id="" onclick="saveForm();">Save</a>
            </form>

        </div>
        <div class="panel" title="View Picture" data-nav="nav_0" id="page_2" data-appbuilder-object="page"
        style="" data-footer="footer_1">
            <form style="width: 100%;min-height: 50px;" data-appbuilder-object="form" class=""
            id="form2" name="form2">
                <img src="images/EmptyBox-Phone.png" id="pic2" width="150px" height="200px" style=""
                class="">
                <div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
                    <label for="">Location</label>
                    <input type="text" style="float:left;" id="locationview" placeholder="">
                </div>
                <div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
                    <label for="">Title</label>
                    <input type="text" style="float:left;" id="titleview" placeholder="">
                </div>
                <div class="textarea_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="textarea">
                    <label for="">MetaData</label>
                    <textarea id="metadataview"></textarea>
                </div>
                <a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
                id="" onclick="updateForm();">Update</a>
            </form>
        </div>


        <div class="panel" title="Test Local Storage" data-footer="footer_1" 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="">PhotoTagger</h1> 
    </header>
    <nav id="nav_0" data-appbuilder-object="nav">
        <h1>Side Menu</h1>
    </nav>
    <footer id="footer_1" data-appbuilder-object="footer"><a href="#main" class="icon home">Home</a><a href="#page_1" class="icon camera"
        onclick="capturePhoto();">Take Picture</a>
        <a href="#page_2" class="icon picture" onclick="showPicture();">View Pictures</a>
        <a href="#page_3" class="icon database" onclick="showStorage();">Local Storage</a>
    </footer>
</div>




</html>

使用英特尔XDK拍摄照片并在另一页上显示

1 个答案: