capturing webview as a image snapshot using winjs


  • I have the following code inside the HTML body that contains several images inside div elements.I would like to capture the whole seen as it is visible on the webview.

      <div data-win-control="SdkSample.ScenarioOutput" id="grid">
          <img id ="Img0" src="/images/0.png" class="GestureTile"/>
          <img id ="Img1" src="/images/1.png" class="GestureTile"/>
          <img id ="Img2" src="/images/2.png" class="GestureTile"/>
          <img id ="Img3" src="/images/3.png" class="GestureTile"/>
          <img id ="Img4" src="/images/4.png" class="GestureTile"/>
          <img id ="Img5" src="/images/5.png" class="GestureTile"/>
          <img id ="Img6" src="/images/6.png" class="GestureTile"/>
          <img id ="Img7" src="/images/7.png" class="GestureTile"/>
          <img id ="Img8" src="/images/8.png" class="GestureTile"/>
          <img id ="Img9" src="/images/9.png" class="GestureTile"/>

    Is it possible to directly capture via winjs or should I approach some other way?.


    Friday, February 08, 2013 5:47 AM


  • Hi Hari,

    Steven's response is specific to Xaml, but the HTML behavior is similar. There isn't a way to render the entire HTML page, but you can render a <canvas> element to a bitmap. This isn't a Windows Store app issue, but a limitation of the individual UI layers: you can capture a full screen image in a DirectX app

    If you can build your image grid on a canvas instead of directly on the page then you can convert that canvas to a bitmap with canvas.toDataURL()


    • Marked as answer by Song Tian Thursday, February 14, 2013 5:23 AM
    Tuesday, February 12, 2013 1:04 AM

All replies