[Résolu] Télécharger une image trop grande

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,