capturer une vue web en tant qu'image instantanée en utilisant winjs

Question

J'ai le code suivant dans le corps HTML qui contient plusieurs images à l'intérieur d'éléments div. Je voudrais capturer l'ensemble de l'image telle qu'elle est visible dans la vue web.

 <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>

Est-il possible de capturer directement via winjs ou dois-je procéder autrement ?

Gracias,

Answer 1

Pour autant que je sache (j'aimerais entendre le contraire), la seule chose qui peut être capturée est le contenu d'une toile. Je ne pense pas que l'on puisse capturer du HTML rendu. Désolé.

Answer 2

Je sais que le sujet est un peu ancien, mais depuis la version 8.1, vous pouvez récupérer le contenu de la vue web sous forme de Blob et de faire ce que vous voulez avec (l'envoyer à un serveur, créer un URI de données et le mettre dans un fichier <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
    }
);

Je n'ai pas encore mis cela en œuvre, je ne peux donc pas dire s'il y a des problèmes.

MISE À JOUR

J'ai donc essayé de mettre en œuvre ce qui précède, et c'est ce qui est indiqué dans la documentation, mais cela n'a pas fonctionné pour moi. Je vais le laisser parce que le commentateur ci-dessous dit que ça marche pour lui. Pour moi, j'ai dû utiliser le code ci-dessous à la place, car l'élément capturePreviewToBlobAsync n'a pas renvoyé de promesse. Je ne sais pas trop pourquoi...

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();

Consultez le site exemple sur cette page (recherchez "capturePreviewToBlobAsync").