Comment compresser et formater des images dans Vue ?

Comment compresser et formater des images dans Vue ?

Dans le développement front-end, nous rencontrons souvent le besoin de compresser et de formater des images. En particulier dans le développement mobile, afin d'améliorer la vitesse de chargement des pages et d'économiser le trafic utilisateur, il est essentiel de compresser et de formater les images. Dans le framework Vue, nous pouvons utiliser certaines bibliothèques d'outils pour compresser et formater des images.

1. Utilisez la bibliothèque compresseur.js pour la compression

compressor.js est une bibliothèque JavaScript pour compresser des images. Il peut compresser les images en fonction des éléments de configuration spécifiés et renvoyer les résultats compressés. Nous pouvons installer compresseur.js via npm :

npm install --save compressorjs

Introduisez compresseur.js dans le composant Vue :

import Compressor from 'compressorjs';

Ensuite, nous pouvons utiliser compresseur.js pour compresser l'image. Voici un exemple de code simple pour compresser des images :

export default {
  methods: {
    compressImage(file) {
      new Compressor(file, {
        quality: 0.6, // 压缩质量，取值范围为0到1
        success(result) {
          // 压缩成功后的回调函数
          console.log('压缩成功:', result);
        },
        error(err) {
          // 压缩失败后的回调函数
          console.error('压缩失败:', err);
        },
      });
    },
  },
};

Dans le code ci-dessus, nous avons créé un objet Compressor via le nouveau mot-clé et spécifié la qualité de compression sur 0,6. Lorsque la compression réussit, la fonction de rappel de réussite est appelée ; lorsque la compression échoue, la fonction de rappel d'erreur est appelée.

2. Utilisez la bibliothèque exif-js pour la rotation des images

Les photos prises sur des appareils mobiles peuvent provoquer une rotation de l'image en raison de problèmes d'orientation de l'appareil. Afin de conserver l'image dans la bonne orientation, nous pouvons utiliser la bibliothèque exif-js pour lire les informations Exif de l'image et faire pivoter l'image en fonction des informations Exif.

Nous pouvons installer exif-js via npm :

npm install --save exif-js

Introduire exif-js dans le composant Vue :

import EXIF from 'exif-js';

Ensuite, nous pouvons utiliser la bibliothèque exif-js pour lire les informations Exif de l'image et la faire pivoter en fonction du Informations Exif. Voici un exemple de code simple pour la rotation d'image :

export default {
  methods: {
    rotateImage(file) {
      EXIF.getData(file, function() {
        const orientation = EXIF.getTag(this, 'Orientation');
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        const img = new Image();
        img.src = URL.createObjectURL(file);

        img.onload = function() {
          const degree = getDegreeByOrientation(orientation);
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.rotate((degree * Math.PI) / 180);
          ctx.drawImage(img, 0, 0);
          const rotatedImage = canvas.toDataURL(file.type, 1.0);
          console.log('旋转后的图片:', rotatedImage);
        };
      });
    },
    getDegreeByOrientation(orientation) {
      switch (orientation) {
        case 3:
          return 180;
        case 6:
          return 90;
        case 8:
          return 270;
        default:
          return 0;
      }
    },
  },
};

Dans le code ci-dessus, nous utilisons la méthode EXIF.getData pour obtenir les informations Exif de l'image et obtenons l'attribut Orientation de l'image via la méthode getTag. Ensuite, calculez l'angle qui doit être pivoté en fonction de l'attribut de direction. Ensuite, créez un élément de canevas, utilisez la méthode de rotation de canevas pour faire pivoter l'image, et enfin utilisez la méthode toDataURL de canevas pour convertir l'image pivotée au format Base64.

Grâce aux deux exemples ci-dessus, nous pouvons compresser et formater des images dans Vue. Cela peut nous aider à améliorer la vitesse de chargement des pages et à économiser le trafic des utilisateurs. Bien entendu, selon des besoins spécifiques, nous pouvons également combiner d'autres bibliothèques d'outils pour traiter davantage les images, comme le recadrage, le filigrane, etc.

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!