How to compress and format images in Vue?

How to compress and format images in Vue?

In front-end development, we often encounter the need to compress and format images. Especially in mobile development, in order to improve page loading speed and save user traffic, it is critical to compress and format images. In the Vue framework, we can use some tool libraries to compress and format images.

1. Use compressor.js library for compression

compressor.js is a JavaScript library for compressing images. It can compress images according to specified configuration items and return the compressed results. We can install compressor.js through npm:

npm install --save compressorjs

Introduce compressor.js into the Vue component:

import Compressor from 'compressorjs';

Then, we can use compressor.js to compress the image. The following is a simple sample code for compressing images:

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

In the above code, we created a Compressor object through the new keyword and specified the compression quality as 0.6. When the compression is successful, the success callback function is called; when the compression fails, the error callback function is called.

2. Use exif-js library for image rotation

Photos taken on the mobile terminal may be rotated due to device orientation issues. In order to keep the image in the correct orientation, we can use the exif-js library to read the Exif information of the image and rotate the image based on the Exif information.

We can install exif-js through npm:

npm install --save exif-js

Introduce exif-js into the Vue component:

import EXIF from 'exif-js';

Then, we can use the exif-js library to read Get the Exif information of the picture and rotate it based on the Exif information. The following is a simple sample code for image rotation:

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;
      }
    },
  },
};

In the above code, we use the EXIF.getData method to obtain the Exif information of the image, and obtain the Orientation (direction) attribute of the image through the getTag method. Then, calculate the angle that needs to be rotated based on the direction attribute. Then, create a canvas element, use the rotate method of canvas to rotate the image, and finally use the toDataURL method of canvas to convert the rotated image to Base64 format.

Through the above two examples, we can compress and format images in Vue. This can help us improve page loading speed and save user traffic. Of course, according to specific needs, we can also combine other tool libraries to further process images, such as cropping, watermarking, etc.

The above is the detailed content of How to compress and format images in Vue?. For more information, please follow other related articles on the PHP Chinese website!