locked
capture screen in windows store apps html5/javascript

    Question

  • hello,

        how to capture screen programmatically?i tried with saving canvas as bitmap by using html2canvas.js but it doesn't render transformations ie rotated elements not rendering perfectly.Is there any way to achieve this pls help with this.

    Thanks

    Tuesday, March 25, 2014 4:37 AM

Answers

All replies

  • Hi suganthe,

    I believe this blog would definitely help you http://blogs.msdn.com/b/lighthouse/archive/2013/10/18/capturing-snapshot-in-windows-8-1-store-app.aspx

    Currently this is the only way to capture screen on WinJS. Even the webview element might not be a good solution.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Tuesday, March 25, 2014 3:25 PM
    Moderator
  • james

    using webview i can take screenshots of web pages only.i need to take screenshots of my application page,..using local state directories i can view my html page in webview but images are not shown.pls help me.

    Wednesday, March 26, 2014 3:55 AM
  • Hi suganthe,

    Take screenshot for the application page is not possible by default WinJS function, but use some third party code should be ok, as you mentioned "html2canvas.js" is one of them. However I'm not familiar with the usage of html2canvas, probably you should ask at their forum.

    And the only way to render image in WinJS is to use webview control, but you mentioned the local html page can be viewed but image cant, this is interesting, if the text can be seen, why image can't. If you want to continue with this, could you share me a demo to reproduce. I would try to find a solution for you.

    As I mentioned, WinJS does not provide any method to render whole screen image, webview would not be a good choice for capture the application page.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Wednesday, March 26, 2014 5:47 AM
    Moderator
  • hi james,

        images are shown using webview but i can't able to load my current application page

        it shows error "windows undefined" in default.js when i try to navigate my index.html.

        i have created new html page i can't able to load my script functions and css of my application pages.

      pls guide me

    Wednesday, March 26, 2014 12:46 PM
  • Sorry for a late response. Problem still exist?

    "Windows undefined" seems to be you are trying to use a not initialized window, however I cannot confirm whats wrong here, could you provide me a demo to reproduce the issue? Sorry again for the late response.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Thursday, April 3, 2014 10:02 AM
    Moderator
  • its ok james,can u provide me ur mail id or any info to send demo of my project
    Thursday, April 3, 2014 11:37 AM
  • Is your project contains private information, otherwise share with us by OneDrive ( https://onedrive.live.com/) is much better , community members can also jump in and contribute on your issue :)

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Thursday, April 3, 2014 12:32 PM
    Moderator
  • Hi james

    i have shared the demo on one drive.click this link to view my demo myDemo ,i tried to navigate default.html page by clicking webview button it shows "windows undefined"..

     my application page looks like this demo i need to snap the screen for user's save and save as option.

     if i loaded the content in local html file and navigate it but it doesn't support all the html5 and css properties.

      Is there any way to snap my screen?..tried canvas to html and save it as bitmap but it doesn't render rotated elements.please help me to achieve this.

      before clicking webview just pinch,drag and rotate my sample images




    Saturday, April 5, 2014 12:39 PM
  • Hi

    I believe that the page is currently used by system and therefore you could not load them again.

    What I have done is to create a new page named: default1.html and I remove the ref also the scripts from the page, should looks like below:

    <!DOCTYPE html>
    <html>
    <head>
        <style>       
            .polaroid {
                border:6px solid black;
            }         
        </style>
    </head>
    <body>
        <button onclick="webview()">webview</button>
        <div id="webviewworkset">
            <x-ms-webview id="webview"></x-ms-webview>
        </div>
        <div id="zoomwrapper">
            <div id="zoom" class="zoomProps">
                <div class="polaroid">
                    <img src="images/RABBIT (2).png" alt="" width="200" height="200" />
                    <span>Coco</span>
                </div>
            </div>
            <div id="zoom2" class="zoomProps">
                <div class="polaroid">
                    <img src="images/Rat.png" alt="" width="200" height="200" />
                    <span>Axo</span>
                </div>
            </div>
            <div id="zoom3" class="zoomProps">
                <div class="polaroid">
                    <img src="images/Zebra v2.png" alt="" width="200" height="200" />
                    <span>Gwo</span>
                </div>
            </div>
        </div>
    </body>
    </html>

    And then I modify the script code from default.html

               <script>
                   function webview() {
                       webview = document.getElementById("webview");
                       webview.navigate("ms-appx-web:///default1.html");
                       //if you could render all the html5 and css properties in local html file u can move this file into local html file.
                   }            
                   var zoom = new ZoomView('#zoom', '#zoom :first');
                   var zoom2 = new ZoomView('#zoom2', '#zoom2 :first');
                   var zoom3 = new ZoomView('#zoom3', '#zoom3 :first');
                </script>

    Now you should be able to see the webview has correctly render the page.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, April 8, 2014 7:52 AM
    Moderator
  • hi james,

        webview renders the 3 sample images but its not correctly render the position of images and rotation angle of images,before clicking webview just drag the image and rotate it.it doesn't working .pls help me

    Tuesday, April 8, 2014 9:56 AM
  • finally i have done it using html2canvas.js newer version it supports css transformations now html2canvas
    Friday, August 15, 2014 7:34 AM