5370 sujets

Sémantique web et HTML

Bonjour,
Pour mon application web Php/Html je demande à l'utilisateur de m'envoyer une image.
Parfois c'est une image de 6000x6000 pixels et le temps de l'envoie vers mon site est trop long.
Comment resizer l'image pour une taille plus petite avant de l'envoyer ?
Merci,
Christophe
Modérateur
Bonjour,

Si l'on suppose que l'image est récupéré via un <input type="file">, voici un petit code qui affiche l'image en taille réduite au dessous de l'input (voir aussi http://jsfiddle.net/parsimonhi/poL9t5v4/
pour tester le code) :

Le HTML
<p>
  <input type="file" onchange="reduceImageSize(100,'png')">
</p>

Le javascript
function reduceImageSize(sizeMax, imageType) {
  var preview = document.createElement("img");
  var reduced = document.createElement("img");
  var file = document.querySelector('input[type=file]').files[0];
  var reader = new FileReader();
  var canvas = document.createElement("canvas");
  var maxWidth = sizeMax;
  var maxHeight = sizeMax;
  reader.onloadend = function() {
    preview.onload = function() {
      let r = Math.min(maxWidth / this.width, maxHeight / this.height);
      canvas.width = this.width * r;
      canvas.height = this.height * r;
      let context = canvas.getContext("2d");
      context.scale(r, r);
      context.drawImage(this, 0, 0);
      reduced.src = canvas.toDataURL(imageType);
      document.body.appendChild(reduced);
    };
    preview.src = reader.result;
  }
  if (file) reader.readAsDataURL(file);
}


Au lieu d'afficher l'image en taille réduite, on pourrait l'envoyer au serveur. Il suffit de remplacer la ligne :
document.body.appendChild(reduced);
par autre chose qui envoie l'image au serveur. La manière dont on fait cet envoi au serveur dépend un peu du contexte dans lequel il est fait, mais en gros, il peut se faire avec fetch() en javascript (c'est quelques lignes de code, et on trouve des exemples partout).

Le nombre de pixels de l'image a été réduit ici à un maximum de 100px en largeur ou en hauteur, et l'image finale est au format 'png'. Il ne s'agit pas juste d'une réduction via du css mais bien d'une réduction du nombre de pixels de l'image. La technique est assez simple et utilise une balise <canvas>. On peut choisir le nombre de pixels maximum et le format finale de l'image si on le souhaite : ce sont les paramètres de la fonction reduceImageSize().

Il y a pas mal d'autres techniques que celle proposée ci-dessus. Chacun fait sa petite cuisine !

Amicalement,
Meilleure solution