Clever Geek Handbook

Capturing webview as image snapshot using winjs

I have the following code inside an HTML body that contains multiple images inside div elements. I would like to capture everything seen as seen in 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"/>
 </div>

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

Thank,

+3


source to share


2 answers


As far as I know (I'd like to hear it differently), the only thing that can be caught is the content of the canvas. I don't think you can capture the rendered HTML. Unfortunately.



0


source


I know the theme is a bit outdated, but as of 8.1 you can grab the content of a webpage as a Blob and then do whatever you need to do with it (send it to the server, create a data URI and put it in <img>

, etc. ...

myWebview.capturePreviewToBlobAsync().done(
    function(imgBlob) {
        // do whatever you need to with the Blob
    },
    function(err) {
        // handle errors... not sure what you might get here, honestly
    }
);

I haven't implemented this yet, so I can't tell if there are any bugs.

UPDATE



So, I tried to implement the above and this is what it says in the documentation, but it didn't work for me. I'm going to keep it because the commenter below says it works for them. For me, I had to use the below code as the method capturePreviewToBlobAsync

did not return a promise. Not sure why ...

var myWebView = document.getElementById("theWebviewToCapture");
var captureOperation = myWebView.capturePreviewToBlobAsync();
captureOperation.addEventListener("complete", function (e) {
    var inputStream = e.target.result.msDetachStream();
    // Now you could copy that input stream to a file stream or whatever...
});
captureOperation.start();

Check out the example on this page (search for "capturePreviewToBlobAsync").

0


source






More articles:


All Articles