前端处理图片

前端对图片进行压缩主要涉及两种常见的方法：使用 JavaScript 库和 HTML5 Canvas。以下是一些具体的方法和步骤：

1. 使用 JavaScript 库

有很多 JavaScript 库可以帮助你在前端实现图片压缩。这些库通常封装了复杂的处理逻辑，使操作更加简单。

• Pica：一个高质量的图片缩放库，支持快速和高质量的图像缩放。
• Compress.js：一个简单的图片压缩库，支持 JPEG 和 PNG 格式，适合处理单张图片。
• ImageCompressor.js：一个功能强大的图片压缩库，支持 JPEG 和 PNG 格式的压缩，提供了多种配置选项。

2. 使用 HTML5 Canvas

利用 HTML5 Canvas API，你可以直接在浏览器中对图片进行压缩。以下是使用 Canvas 进行图片压缩的步骤：

步骤

1. 加载图片到 Canvas：

   function compressImage(file, maxWidth, maxHeight, quality, callback) {
     const reader = new FileReader();
     reader.onload = function (e) {
       const img = new Image();
       img.onload = function () {
         const canvas = document.createElement('canvas');
         const ctx = canvas.getContext('2d');
   
         // 计算新的宽高
         let width = img.width;
         let height = img.height;
         if (width > height) {
           if (width > maxWidth) {
             height *= maxWidth / width;
             width = maxWidth;
           }
         } else {
           if (height > maxHeight) {
             width *= maxHeight / height;
             height = maxHeight;
           }
         }
   
         canvas.width = width;
         canvas.height = height;
         ctx.drawImage(img, 0, 0, width, height);
   
         // 生成压缩后的图片
         canvas.toBlob(function (blob) {
           callback(blob);
         }, 'image/jpeg', quality);
       };
       img.src = e.target.result;
     };
     reader.readAsDataURL(file);
   }
   

2. 调用压缩函数：

document.getElementById('fileInput').addEventListener('change', function (event) {
 const file = event.target.files[0];
 compressImage(file, 800, 600, 0.8, function (compressedBlob) {
   const url = URL.createObjectURL(compressedBlob);
   const img = new Image();
   img.onload = function () {
     URL.revokeObjectURL(url);
   };
   img.src = url;
   document.body.appendChild(img); // 显示压缩后的图片
 });
});

#### 参数解释
-   `file`: 原始图片文件对象。
-   `maxWidth`, `maxHeight`: 压缩后的图片最大宽度和高度。
-   `quality`: 压缩质量，0 到 1 之间的浮点数，值越低，压缩越强。
-   `callback`: 压缩完成后的回调函数，参数是压缩后的 Blob 对象。

compressedBlob 是一个二进制文件。具体来说，Blob 是 JavaScript 中表示二进制数据的对象，它可以用来处理文件、图片、视频等二进制数据。

关于 Blob

• Blob 对象：Blob 代表了不可变的原始数据，通常用于处理二进制数据，比如文件或图片。你可以将 Blob 对象视作一个包含原始二进制数据的容器。

• Blob 的用途：

  • 创建文件：可以通过 Blob 对象创建文件，并进行上传或下载操作。
  • 生成 URL：使用 URL.createObjectURL(blob) 可以生成一个临时的 URL，用于访问 Blob 对象的数据。例如，你可以将这个 URL 用于显示压缩后的图片。

compressedBlob 的使用

在前端对图片进行压缩时，你通常会得到一个 Blob 对象，这个对象包含了压缩后的图片数据。你可以使用 Blob 对象进行以下操作：

1. 生成临时 URL：

   const url = URL.createObjectURL(compressedBlob);
   

   这个 URL 可以用来创建一个 img 标签以显示压缩后的图片，或者用于文件下载。

2. 显示图片：

   const img = new Image();
   img.onload = function () {
     URL.revokeObjectURL(url); // 释放 URL 对象，避免内存泄漏
   };
   img.src = url;
   document.body.appendChild(img); // 将图片添加到页面
   

3. 上传图片：

   你可以将 Blob 对象作为表单数据的一部分上传到服务器：

   const formData = new FormData();
   formData.append('file', compressedBlob, 'compressed.jpg');
   
   fetch('/upload', {
     method: 'POST',
     body: formData
   }).then(response => response.json())
     .then(data => console.log(data))
     .catch(error => console.error(error));
   

总结

compressedBlob 是压缩后的图片的二进制数据，可以用于显示、上传或存储。它是 Blob 对象的一个实例，提供了处理二进制数据的灵活性。