当前位置：首页 > HTML

h5实现图片压缩

2026-01-13 23:10:12HTML

使用Canvas API压缩图片

HTML5的Canvas API可以通过调整画布尺寸和图像质量来实现图片压缩。创建一个Canvas元素，将图片绘制到Canvas上，再通过toDataURL或toBlob方法导出压缩后的图片。

function compressImage(file, quality, maxWidth, maxHeight, callback) {
  const reader = new FileReader();
  reader.onload = function(e) {
    const img = new Image();
    img.onload = function() {
      const canvas = document.createElement('canvas');
      let width = img.width;
      let height = img.height;

      if (width > maxWidth || height > maxHeight) {
        const ratio = Math.min(maxWidth / width, maxHeight / height);
        width *= ratio;
        height *= ratio;
      }

      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, width, height);

      canvas.toBlob(function(blob) {
        callback(blob);
      }, 'image/jpeg', quality);
    };
    img.src = e.target.result;
  };
  reader.readAsDataURL(file);
}

使用第三方库实现更高效压缩

对于更复杂的压缩需求，可以使用第三方库如compressorjs或browser-image-compression。这些库提供了更多选项和更好的压缩效果。

// 使用browser-image-compression示例
import imageCompression from 'browser-image-compression';

const options = {
  maxSizeMB: 1,
  maxWidthOrHeight: 1920,
  useWebWorker: true
};

imageCompression(file, options)
  .then(compressedFile => {
    console.log('压缩后的文件大小:', compressedFile.size);
  })
  .catch(error => {
    console.error(error);
  });

调整压缩参数优化效果

通过调整压缩参数可以在文件大小和图像质量之间取得平衡。quality参数控制JPEG图像的质量（0-1），maxWidth和maxHeight限制图像的最大尺寸。

// 高质量压缩，保留更多细节
compressImage(file, 0.8, 2000, 2000, function(compressedBlob) {
  // 处理压缩后的图片
});

// 低质量压缩，文件更小
compressImage(file, 0.5, 800, 800, function(compressedBlob) {
  // 处理压缩后的图片
});

处理压缩后的图片数据

压缩后的图片可以转换为DataURL用于预览，或直接上传到服务器。使用URL.createObjectURL可以生成临时URL用于图片显示。

// 显示压缩后的图片预览
const compressedImageUrl = URL.createObjectURL(compressedBlob);
document.getElementById('preview').src = compressedImageUrl;

// 上传压缩后的图片
const formData = new FormData();
formData.append('image', compressedBlob, 'compressed.jpg');
fetch('/upload', {
  method: 'POST',
  body: formData
});

考虑浏览器兼容性和性能

不同浏览器对Canvas和图像压缩的支持可能有所差异。对于大文件压缩，建议使用Web Worker避免阻塞主线程。检测浏览器支持情况可以提供更好的用户体验。

// 检测浏览器是否支持必要的API
if (!window.FileReader || !window.HTMLCanvasElement) {
  alert('您的浏览器不支持图片压缩功能');
  return;
}

// 使用Web Worker处理大文件压缩
const worker = new Worker('compress-worker.js');
worker.postMessage({ file: file, quality: 0.7 });
worker.onmessage = function(e) {
  const compressedBlob = e.data;
  // 处理压缩结果
};

h5实现图片压缩