Si comme moi vous avez une application et que vous souhaitez avoir un retour d’expérience de vos clients et bien cet article peut vous intéresser. C’est en consultant mon compte Office 365 en ligne que j’ai remarqué que de temps en temps Microsoft ouvrait un petit onglet en bas à droite nous proposant de donner notre avis avec éventuellement d’ajouter une capture écran pour montrer un problème par exemple:
Problème et solution
Le rendu de notre application web étant côté client, il est évidant qu’on va regarder ce que javascript propose. C’est tout de suite canvas.toDataURL() qui a retenu toute mon attention. Maintenant le problème est qu’il faudrait que toute mon app soit dans un canvas 😣. Par chance Niklas von Hertzen a développé une librairie qui me sauve ! http://html2canvas.hertzen.com/. Sa librairie est vraiment géniale, par défaut vous lui indiquez un élément de votre DOM que vous souhaitez capturer et elle vous retourne un Canvas !
Dans mon cas je souhaite l’écran complet de mon application Blazor. Et bien super facile car notre application est dans une <div> avec l’identifiant app :
A partir de là, le reste sera très simple et j’ai donc plusieurs possibilités qui s’offre à moi :
- Coller le canvas retournée dans un Canvas existant. Ainsi l’utilisateur verra ce qu’il m’envoie
- Récupérer la chaine de donnée du Canvas pour la stocker dans le message
- éventuellement télécharger cette capture dans un fichier .PNG.
Coller le canvas
html2canvas(document.querySelector("#app")).then(canvas => {
var canvasID = document.getElementById(canvasDestination);
//get the destination context
var ctx = canvasID.getContext('2d');
//reduce the image
ctx.scale(0.5, 0.5);
ctx.width = window.innerWidth / 3;
ctx.height = window.innerHeight / 3;
ctx.drawImage(canvas, 0, 0);
});
}
A noter qu’ici je pourrais passer directement html2canvas une configuration d’échelle pour récupérer un canvas « sur mesure » :
html2canvas(document.querySelector("#app"), {
scale: 0.5
} ).then(canvas => {
//...
côté C#, rien de sorcier, j’ai un div sur la vue HTML et un appel de lavascript via l’interop, en passant l’id de ma DIV :
{
await js.InvokeVoidAsync("put2Canvas", "myCanvas");
}
Mon problème avec le délai de réponse du javascript
🤔
Il se passe un tout petit delta entre l’appel et la réponse de la fonction javascript qui m’a posé problème. Ainsi pour la fonction me permettant de récupérer côté C# la chaine de DATA de mon image le code arrivé directement à la chaine 38 sans attendre le retour de la fonction :
J’ai donc utilisé Promise pour qu’il gère ma fonction de manière asynchrone et ainsi le code C# a dû attendre le resolve pour continuer
Retrouver mes sources sur ce repository Github : https://github.com/tossnet/Blazor-Screenshot
