当前位置：首页 > VUE

vue实现图片压缩

2026-01-17 14:44:40VUE

使用 canvas 实现图片压缩

在 Vue 项目中可以通过 canvas 的 drawImage 和 toDataURL 方法实现图片压缩。创建一个方法处理图片文件，将其绘制到 canvas 并输出压缩后的 base64 或 Blob 数据。

compressImage(file, quality = 0.7) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (event) => {
      const img = new Image();
      img.src = event.target.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, img.width, img.height);
        const compressedDataUrl = canvas.toDataURL('image/jpeg', quality);
        resolve(compressedDataUrl);
      };
    };
  });
}

限制图片尺寸

在压缩过程中可以限制图片的最大宽度或高度，避免大图直接压缩导致质量损失过大。通过计算缩放比例调整 canvas 的绘制尺寸。

vue实现图片压缩

const MAX_WIDTH = 800;
const MAX_HEIGHT = 800;
let width = img.width;
let height = img.height;

if (width > height) {
  if (width > MAX_WIDTH) {
    height *= MAX_WIDTH / width;
    width = MAX_WIDTH;
  }
} else {
  if (height > MAX_HEIGHT) {
    width *= MAX_HEIGHT / height;
    height = MAX_HEIGHT;
  }
}

canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);

转换为 Blob 对象

压缩后的 base64 数据可以通过以下方法转换为 Blob 对象，便于表单提交或上传处理。

vue实现图片压缩

function dataURLtoBlob(dataurl) {
  const arr = dataurl.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

使用第三方库

对于更复杂的压缩需求，可以使用专门针对图片处理的库如 compressorjs。安装后直接在 Vue 组件中调用。

npm install compressorjs

import Compressor from 'compressorjs';

new Compressor(file, {
  quality: 0.6,
  success(result) {
    console.log(result);
  },
  error(err) {
    console.error(err.message);
  },
});

上传压缩后的图片

将压缩后的图片通过 FormData 上传到服务器，示例中使用 axios 发送 POST 请求。

const formData = new FormData();
formData.append('file', compressedBlob, 'compressed.jpg');

axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(response => {
  console.log('上传成功', response);
});