locked
could anybody please guide how to display photo on screen after capturing the photo using javascript??

    Question

  • I want to display captured photo on camera screen as a small icon on bottom left or right??please anybody guide me in this issue....thanks in advance
    Sunday, January 20, 2013 8:15 AM

Answers

All replies

  • Hi Satish sagar,

    i think the sample present in the url will be useful for you, Please check it once.

    http://code.msdn.microsoft.com/windowsapps/Metro-style-device-app-for-4f39b7bf


    raja



    • Edited by Raja KPV Sunday, January 20, 2013 10:11 AM
    Sunday, January 20, 2013 10:09 AM

  • Hi satish,

    When you use the Windows.Media.Capture.MediaCapture object to take photo, you can either get the photo's stream or save it to file on certain folders (known folders or temp folders). In any case, you can further call "URL.createObjectURL" function to get a resource url pointing to the photo file/stream.


    #How to reference content (Windows Store apps using JavaScript and HTML) (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/Hh781215.aspx

    #createObjectURL method (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/hh453196.aspx

    After you get the resource url, you can assign it to an html <img> element (the "src" attribute) in js code. Here is a blog article which also mentioned how to get the photo/video stream from mediacapture and display them on UI:


    #Tutorial Series: using WinJS & WinRT to build a fun HTML5 Camera Application for Windows 8 (1/4)
    http://blogs.msdn.com/b/davrous/archive/2012/09/05/tutorial-series-using-winjs-amp-winrt-to-build-a-fun-html5-camera-application.aspx


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by satish sagar Monday, January 21, 2013 9:04 AM
    Monday, January 21, 2013 8:49 AM
    Moderator
  • hi chengthanks for your reply but after implementing that links I can display first photo capture on UI but when I captured second photo,that first photo had been removed by this second photo.i want to display my photos as a list according to recent to old photos like that.I am using below code to capture the photo and to dispay on UI.please help me in this issue 

    (

    function() {

       

    "use strict";

       

    varphotoKey = "capturedPhoto";

       

       

    varlocalSettings = Windows.Storage.ApplicationData.current.localSettings;

       

       

    varpage = WinJS.UI.Pages.define("/html/capturephoto.html", {

            ready:

    function(element, options) {

                document.getElementById(

    "captureButton").addEventListener("click", capturePhoto, false);

                document.getElementById(

    "resetButton").addEventListener("click", reset, false);

                document.getElementById(

    "resetButton").style.visibility = "hidden";

               

    if(localSettings.values[photoKey]) {

                    document.getElementById(

    "captureButton").disabled = true;

                    reloadPhoto();

                }

            }

        });

       

    functioncapturePhoto() {

            WinJS.log && WinJS.log(

    "", "sample", "status");

           

    // Using Windows.Media.Capture.CameraCaptureUI API to capture a photo


           

    vardialog = newWindows.Media.Capture.CameraCaptureUI();

           

    varaspectRatio = { width: 1, height: 1 };

            dialog.photoSettings.croppedAspectRatio = aspectRatio;

            dialog.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).done(

    function(file) {

               

    if(file) {

                   

    varphotoBlobUrl = URL.createObjectURL(file, { oneTimeOnly: true});

                    document.getElementById(

    "capturedPhoto").src = photoBlobUrl;

                   

                    document.getElementById(

    "resetButton").style.visibility = "visible";

                    localSettings.values[photoKey] = file.path;

                    localSettings.values[photoKey1] = file.path;

                }

    else{

                    WinJS.log && WinJS.log(

    "No photo captured.", "sample", "status");

                }

            },

    function(err) {

                WinJS.log && WinJS.log(err,

    "sample", "error");

            });

        }

       

    functionreset() {

            WinJS.log && WinJS.log(

    "", "sample", "status");

            document.getElementById(

    "capturedPhoto").src = "/images/placeholder-sdk.png";

            document.getElementById(

    "resetButton").style.visibility = "hidden";

            localSettings.values.remove(photoKey);

        }

       

    functionreloadPhoto() {

           

    // Resume user's state


            Windows.Storage.StorageFile.getFileFromPathAsync(localSettings.values[photoKey]).done(

    function(file) {

                document.getElementById(

    "capturedPhoto").src = URL.createObjectURL(file, { oneTimeOnly: true});

                document.getElementById(

    "resetButton").style.visibility = "visible";

                document.getElementById(

    "captureButton").disabled = false;

            },

    function(err) {

                localSettings.values.remove(photoKey);

                document.getElementById(

    "captureButton").disabled = false;

                WinJS.log && WinJS.log(err,

    "sample", "error");

            });

        }

    })();

    Monday, January 21, 2013 9:03 AM
  • Hi satish,

    Thanks for your quick reply.

    Well, if you want to maintain a recent image list (captured by camera), I'd
    recommend you consider the following method:

    • create a dedicated folder (either in well-known folder such as
      picturelibrary or app's temp folder) for storing images captured by camera in
      your windows  store app
    • when you want to show recent image list (captured by camera in your windows
      store app), just use fileIO api to lookup all the image files saved in the
      dedicated folder and create a file path list
    • then you can use either listview or flipview to show the images (loaded
      from disk file and converted to url by URL.createObjectURL) one by one

    BTW, since the original question is addressed, you can start a new thread on
    the new question :)


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, January 21, 2013 10:07 AM
    Moderator