Discussion :

[BZHGames]

Bonjour à tous,

Je ne sais pas si certains d'entre vous connaissent html2canvas (https://html2canvas.hertzen.com/).
Cette bibliothèque javascript permet de réaliser des Screenshots.

Sur mon site perso, je propose de jouer, grâce à un émulateur, à des jeux CPC Amstrad. Un bouton permet aux joueurs d'envoyer un screenshot de l'émulateur faisant apparaître le score réalisé afin qu'il soit enregistré.
Jusque là tout fonctionne correctement.
Récemment, j'ai voulu mettre en place une fonction pour analyser l'image retourner afin d'identifier le score réalisé. Là encore ça se passait bien jusqu'à ce que je me rend compte que pour certains joueurs ça ne fonctionnait pas.
Après avoir cherché pourquoi, j'ai remarqué que pour certains joueurs, le screenshot généré ne respecte pas les dimensions indiqués.

Pourtant, dans le code html, je renseigne les dimensions de ma div dont je veux faire un screenshot avec : style="width: 768px; height: 544px;".
Dans ma fonction javascript qui appelle la méthode html2canvas, je reprécise les dimensions :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
document.getElementById('screen-placeholder').style.width = "768px";
document.getElementById('screen-placeholder').style.height = "544px";

Et j'indique les dimensions de l'image à créer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
html2canvas(document.getElementById('screen-placeholder')).then(function(canvas) {
          data = canvas.toDataURL();
          image = document.createElement('img');
          image.src = data;
          image.style.width = "768px";
          image.style.height = "544px";
}

Et malgré cela, pour certains joueurs, l'image générée a une taille de : 960px / 680px

Cela fait maintenant des jours que je me prend la tête sur le sujet sans trouver de solution. Alors si quelqu'un à une idée et peut m'apporter son aide je serai heureux d'échanger avec lui

[BZHGames]

Bon après mettre pris la tête pendant des jours, il suffit que je poste un message pour trouver une piste.

Je viens effectivement de comprendre que les personnes qui ne sont pas en mode d'affichage 100% n'ont pas les bonnes dimensions sur les screenshots gérés par html2canvas.
C'est une piste, mais je n'ai aucune idée comment résoudre mon problème.

[BZHGames]

Comme on est jamais mieux servi que par soi-même, j'ai enfin trouvé une solution à mon problème.

Je donne l'info au cas où ça aiderait quelqu'un pour ne pas qu'il passe autant de temps que moi à chercher.

En fait, pour ne pas dépendre du mode d'affichage du système ou du navigateur, je précise dans les options de la fonction html2canvas la largeur, la hauteur et surtout le zoom à appliquer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
html2canvas(document.getElementById('screen-placeholder'), {
  width: 768,
  height: 544,
  scale: 1
}).then(function(canvas) {
          data = canvas.toDataURL();
          image = document.createElement('img');
          image.src = data;
          image.style.width = "768px";
          image.style.height = "544px";
}