Bonjour à tous,

Je travaille sur un site Internet pour lequel chaque utilisateur pourra ajouter une photo de profil.

Pour harmoniser l'affichage, j'ai besoin que les photos soient coupées en 300 px x 300 px.

J'ai écrit un code pour cela, et ça fonctionne, à un détail près :

Le canvas est automatiquement redimensionné en 300 px x 150 px.

J'ai essayé de modifier la hauteur du canvas, mais dans ce cas, l'image est étirée.

J'ai vu que d'autres développeurs ont eu le même problème que moi, mais je n'ai pas trouvé de solution.

Voici mon code :

<div>
      <canvas id="myScreenCanvas" style="width:300px;height:300px;"></canvas>
</div>

const splitImage = (x, y, width, height) => {
  const canvas = document.getElementById('myScreenCanvas'),
  ctx = canvas.getContext('2d'),
  image = document.getElementById("user-photo-container").childNodes[0]

  canvas.style.width = width
  canvas.style.height = height

  ctx.drawImage(image, x, y, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height / 2);
}

L'image s'affiche bien en 300 par 300 lorsque je divise la hauteur de destination par 2.

Cependant, la qualité de l'image n'est pas top, alors qu'elle est top lorsque le canvas n'a pas de contrainte de taille.

Je vous remercie pour votre aide.

Bonjour,

pour redimensionner l'élément <canvas>, ce n'est pas l'attribut style, mais les attributs width et height (voir cette page du MDNà ce sujet)