Discussion :

[cmascart]

J'ai un autre problème, avec html2canvas: il met des marges blanches.
Je voudrais screenshoter l'image de droite, avec le homard

Je lui passe son élément conteneur.
Et voici ce que j'obtiens.


Avant d'envoyer en ajax, je réduis l'image sur canvas2, pour en diminuer le volume, sans résoudre le problème des marges.


Voici mon

Code html :

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

1
2
3
4
5
6
  <ARTICLE id="pictoSource" style="min-width:initial;">
   <H2>&#x1F320;&nbsp;Media</H2>
   <DIV id="fond">
    <IMG class="media" src="../../medias/fond/00000038.jpg" style="width:100%;background-color:rgba(0, 0, 0, 0);" draggable="false"/>   </DIV>
  </ARTICLE>
 </SECTION>

Voici mon code Javascript
Plus haut, xhrPicto est déclaré comme un new XMLHttpRequest()

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   actionPicto = function()
   {
    html2canvas(document.getElementById('pictoSource')).then((canvas) =>
    {
     const
      canvas2 = document.createElement('canvas'),
      ctx2 = canvas2.getContext('2d')
     ;
 
     canvas2.setAttribute('width', 177);
     canvas2.setAttribute('height', 100);
     ctx2.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, 177, 100);
     xhrPicto.open('POST', 'ajax/ajaxPicto.php', true);
     xhrPicto.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     xhrPicto.send(`picto=${pictoFichier}&image=${canvas2.toDataURL("image/jpeg", 0.5)}`);
    });
   },

Enlevez le 2 de canvas2, dans xhrPicto.send et vous enverrez la grande image.
Le problème, ce sont les marges blanches en bas et à droite, dans un cas comme dans l'autre.
Changer la qualité de l'image (réglée, ici, sur 0.5), ne change rien non plus.

J'ai également un warning en console de Firefox

Erreur dans les liens source : Error: request failed with status 404
URL de la ressource : http://localhost/Sogedima/pics/js/html2canvas.js
URL du lien source : html2canvas.js.map

J'ai pourtant bien importé la librairie html2canvas.
Est-ce la cause du problème ?

Comment faire pour screenshoter l'élément HTML sans marge, ni en bas, ni à droite ?
L'image doit cadrer exactement l'élément.
Merci
Christian.

[mathieu]

si vous voulez juste récupérer l'image, ça serait peut-être plus simple d'envoyer le chemin de l'image et de faire le traitement en PHP.