Vue에서 이미지를 압축하고 형식을 지정하는 방법은 무엇입니까?

npm install --save compressorjs

import Compressor from 'compressorjs';

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

npm install --save exif-js

import EXIF from 'exif-js';

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