前端图片压缩下载

有时候懒得去找图片压缩的网站，索性就自己封装了一个前端实现图片压缩下载功能的小组件，可自定义压缩比例。样式懒得调整了，代码复制就能用，想要好看一点的，自己拿去改改样式。

<template>
  <div>
    <input type="file" @change="compressImage">
    <input v-model="compressionRatio" type="number" step="0.1" min="0.1" max="1" placeholder="Compression Ratio">
    <button @click="downloadCompressedImage">下载图片</button>
    <img :src="compressedImageData" alt="Compressed Image" v-if="compressedImageData">
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalImageData: null,
      compressedImageData: null,
      compressionRatio: 0.5, // 默认压缩比例
    };
  },
  methods: {
    compressImage(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();

        reader.onload = () => {
          const img = new Image();
          img.src = reader.result;

          img.onload = () => {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = img.width;
            canvas.height = img.height;

            // 绘制原始图片
            ctx.drawImage(img, 0, 0);

            // 获取压缩比例
            const ratio = parseFloat(this.compressionRatio);

            // 在Canvas上绘制压缩后的图片
            canvas.toBlob((blob) => {
              const compressedImageUrl = URL.createObjectURL(blob);
              this.compressedImageData = compressedImageUrl;
            }, 'image/jpeg', ratio);
          };
        };

        reader.readAsDataURL(file);
      }
    },
    downloadCompressedImage() {
      if (this.compressedImageData) {
        const link = document.createElement('a');
        link.href = this.compressedImageData;
        link.download = 'compressed_image.jpg';
        link.click();
      } else {
        alert('请选择要压缩的图片')
      }
    },
  },
};
</script>