Génération automatique de vignettes à l'aide de JavaScript

Avec le développement d'Internet, les images sont devenues un élément indispensable des pages Web. Mais à mesure que le nombre d’images augmente, la vitesse de chargement des images est devenue un problème très important. Afin de résoudre ce problème, de nombreux sites Web utilisent des vignettes pour afficher des images, mais pour générer des vignettes, nous devons utiliser des outils de traitement d'images professionnels, ce qui est une chose très gênante pour certains non-professionnels. Ensuite, utiliser JavaScript pour générer automatiquement des vignettes devient un bon choix.

Comment utiliser JavaScript pour réaliser une génération automatique de vignettes ? Tout d’abord, nous devons comprendre l’API File de HTML5. L'API File nous permet de lire des fichiers locaux et d'opérer sur ces fichiers à l'aide de JavaScript. Nous pouvons l'utiliser pour obtenir des informations pertinentes sur l'image, telles que la largeur et la hauteur de l'image. Après avoir obtenu les informations sur l'image, nous pouvons commencer à générer des vignettes.

Ce qui suit est un exemple d'utilisation de l'API File pour lire des images locales :

<input type="file" onchange="handleFiles(this.files)">
<script>
function handleFiles(files) {
  var img = new Image;
  var reader = new FileReader;
  reader.onload = function(e) {
    img.src = e.target.result;
    document.body.appendChild(img);
  }
  reader.readAsDataURL(files[0]);
}
</script>

Ce code récupère l'image via l'élément <input type="file"> et utilise FileReader pour lire le données d'images. Une fois la lecture terminée, définissez l'attribut src de l'image sur les données lues et l'image téléchargée peut être affichée sur la page.

Ensuite, nous devons réduire la taille de l'image. Nous pouvons terminer l’opération de vignette via Canvas. Canvas est un élément HTML utilisé pour dessiner des graphiques. Il nous permet de dessiner diverses formes sur la page, notamment du texte et des images. Nous pouvons mettre l'image dans Canvas, effectuer une opération de vignette, puis obtenir les données de vignette et les afficher sur la page.

Ce qui suit est un exemple d'utilisation de Canvas pour générer des vignettes :

<input type="file" onchange="handleFiles(this.files)">
<script>
function handleFiles(files) {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  var reader = new FileReader;
  reader.onload = function(e) {
    var img = new Image;
    img.onload = function() {
      var w = img.width, h = img.height;
      var max = Math.max(w, h);
      var scale = max / 200;
      canvas.width = w / scale;
      canvas.height = h / scale;
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      var data = canvas.toDataURL();
      var thumbnail = new Image;
      thumbnail.src = data;
      document.body.appendChild(thumbnail);
    }
    img.src = e.target.result;
  }
  reader.readAsDataURL(files[0]);
}
</script>

Ce code utilise Canvas pour générer des vignettes et afficher les vignettes sur la page. Dans cet exemple, nous limitons la taille de la vignette à 200 pixels. Si la largeur et la hauteur de l'image sont inférieures à 200 pixels, la vignette ne sera pas traitée.

Grâce à l'introduction ci-dessus, nous pouvons savoir qu'il n'est pas difficile d'utiliser JavaScript pour réaliser une génération automatique de vignettes. Il suffit de maîtriser l'utilisation de base de File API et de Canvas pour réaliser facilement ce travail. Dans le même temps, dans l'utilisation réelle, nous devons également prêter attention à certains problèmes, tels que les problèmes de compatibilité qui peuvent être rencontrés, etc., qui doivent être résolus de manière ciblée. J'espère que l'introduction de cet article pourra être utile à tout le monde.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!