在浏览器端处理图片压缩，本质上不是靠JavaScript直接操作图片文件内部的编码数据，而是利用Canvas这个强大的像素处理接口。先把图片解码成位图，再按照需求重新采样和编码输出。这样做的一个明显好处是，不需要引入额外的图片处理库，就能在大多数现代浏览器中实现图片尺寸调整与质量压缩。对于上传头像、发布动态图等常见场景，前端先行压缩能明显降低服务器带宽压力和用户等待时间。

一、Canvas重采样与编码的原理

Canvas之所以能压缩图片，核心在于它提供了两个关键能力。第一是drawImage方法，它可以把一张已解码的图片对象绘制到画布上，并且允许指定目标宽高。如果目标宽高小于原始宽高，浏览器内部会对像素进行重采样，丢弃一部分像素信息，从而降低图片的数据量。这个过程中，图片的物理尺寸发生了改变，视觉上仍然保持原有宽高比，但文件体积会显著下降。

第二是toBlob或toDataURL方法，它们负责把画布上的像素数据重新编码成图片文件。这里最常用的输出格式是JPEG和WebP，因为它们支持有损压缩。调用toBlob时可以传入一个质量参数，取值范围通常为0到1，数值越低压缩率越高，文件越小，但画质损失也越明显。PNG虽然也支持导出，但不接受质量参数，压缩效果有限，适合需要保留透明通道且色彩简单的图片。

下面是一个最基础的压缩函数示例，它接收图片文件、最大宽度和质量参数，返回一个Promise，最终得到压缩后的Blob对象：

function compressImage(file, maxWidth, quality) {
  return new Promise(function(resolve, reject) {
    var reader = new FileReader();
    reader.onload = function(e) {
      var img = new Image();
      img.onload = function() {
        var canvas = document.createElement('canvas');
        var width = img.width;
        var height = img.height;
        if (width > maxWidth) {
          height = height * (maxWidth / width);
          width = maxWidth;
        }
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, width, height);
        canvas.toBlob(function(blob) {
          resolve(blob);
        }, 'image/jpeg', quality);
      };
      img.onerror = reject;
      img.src = e.target.result;
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

这段代码先用FileReader把文件读成DataURL，再交给Image对象解码。图片加载完成后，根据最大宽度按比例缩放尺寸，创建对应大小的Canvas，绘制后调用toBlob导出JPEG。整个过程都在浏览器本地完成，不会上传原始图片到服务器。

二、完整实现过程：从文件选择到压缩输出

实际项目中，压缩功能通常要和文件选择控件配合。用户点击上传按钮，触发<input type="file">的change事件，从中获取File对象。读取文件的常见方式有两种：一是用FileReader.readAsDataURL，得到base64字符串；二是用URL.createObjectURL，得到临时对象URL。前者更通用，但会产生较大的字符串内存占用；后者效率更高，但需要在使用后调用URL.revokeObjectURL释放资源。对于压缩场景，二者差别不大，选用任一种都可以。

拿到图片地址并创建Image对象后，不要急着直接绘制。应当先判断图片的EXIF方向信息，尤其是手机拍摄的图片，很多带有旋转标记，如果不处理会导致压缩后图片方向错误。可以使用exif-js这类库读取Orientation值，再通过Canvas的rotate或transform进行矫正。如果业务只处理用户主动上传的头像，一般可以简化省略这一步，但在移动端H5页面上传照片时必须重视。

尺寸计算是压缩过程中最关键的一步。通常的做法是设定一个最大宽度或最大高度，然后按比例缩放。例如原图是4000×3000，限制最大宽度为1280，那么高度就变成3000×(1280/4000)=960。如果原图本身就小于限制值，则不缩放，保持原始尺寸。这样可以避免小图被强制放大导致模糊和体积反而增大的问题。

下面是一个完整的压缩示例，包含文件选择、尺寸限制、导出和预览：

document.getElementById('fileInput').addEventListener('change', function(e) {
  var file = e.target.files[0];
  if (!file) return;
  compressAndPreview(file, 1280, 0.8).then(function(result) {
    var previewImg = document.getElementById('preview');
    previewImg.src = URL.createObjectURL(result.blob);
    console.log('压缩后大小：' + result.blob.size + ' bytes');
  }).catch(function(err) {
    console.error('压缩失败', err);
  });
});
function compressAndPreview(file, maxWidth, quality) {
  return new Promise(function(resolve, reject) {
    var url = URL.createObjectURL(file);
    var img = new Image();
    img.onload = function() {
      URL.revokeObjectURL(url);
      var canvas = document.createElement('canvas');
      var width = img.naturalWidth;
      var height = img.naturalHeight;
      if (width > maxWidth) {
        height = Math.round(height * (maxWidth / width));
        width = maxWidth;
      }
      canvas.width = width;
      canvas.height = height;
      var ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, width, height);
      canvas.toBlob(function(blob) {
        resolve({ blob: blob, width: width, height: height });
      }, 'image/jpeg', quality);
    };
    img.onerror = function() {
      URL.revokeObjectURL(url);
      reject(new Error('图片加载失败'));
    };
    img.src = url;
  });
}

这个实现里，用URL.createObjectURL代替FileReader，减少了base64转换开销。图片加载完成后立即释放对象URL，避免内存泄漏。同时使用img.naturalWidth和naturalHeight获取原始尺寸，而不是img.width，因为后者可能受到CSS样式影响而不准确。

三、压缩质量与性能调优

质量参数的选择直接影响压缩效果。对于JPEG格式，质量0.8是一个比较平衡的值，大部分场景下肉眼几乎看不出差异，但文件体积能减少60%以上。如果是用户头像或者缩略图，质量可以降到0.6甚至0.5；如果是商品详情图或需要放大的图片，则建议保持在0.85以上。这里没有绝对标准，需要根据实际业务测试得出最佳值。

格式方面，WebP在同等质量下通常比JPEG小30%左右，而且支持透明通道，是非常理想的选择。但需要注意的是，WebP的兼容性在很老的浏览器上存在问题，目前主流浏览器都已支持。如果项目需要兼容旧版Safari或IE，可以优先导出JPEG，或者使用特性检测决定是否使用WebP。另外，toBlob方法本身是异步的，不会阻塞主线程，但Canvas绘制和图像解码仍然占用主线程，对大图片进行压缩时可能会造成页面卡顿。

为了提升性能，可以使用createImageBitmap和OffscreenCanvas。createImageBitmap可以在Worker中解码图片，返回ImageBitmap对象；OffscreenCanvas则允许在Web Worker中进行Canvas绘制，完全避免阻塞主线程。不过要注意，OffscreenCanvas的toBlob方法在部分浏览器中还未实现，可以用convertToBlob替代。对于超大图片，另一种思路是分块压缩，但这会复杂得多，普通业务先用不上。

下面是一个使用createImageBitmap和OffscreenCanvas的示例，展示如何在Worker中完成压缩：

self.onmessage = function(e) {
  var data = e.data;
  fetch(data.url)
    .then(function(res) { return res.blob(); })
    .then(function(blob) { return createImageBitmap(blob); })
    .then(function(bitmap) {
      var canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
      var ctx = canvas.getContext('2d');
      ctx.drawImage(bitmap, 0, 0);
      return canvas.convertToBlob({ type: 'image/jpeg', quality: data.quality });
    })
    .then(function(blob) {
      self.postMessage({ blob: blob });
    })
    .catch(function(err) {
      self.postMessage({ error: err.message });
    });
};

这段代码运行在Worker线程里，接收图片URL和质量参数，通过fetch获取图片数据，再用createImageBitmap解码。整个压缩过程不占用页面主线程，用户体验更流畅。实际使用时需要从主线程postMessage传递数据，并在Worker创建时注意兼容性。

四、常见问题与规避方案

跨域Canvas污染是前端图片处理中最容易踩的坑。如果图片来自其他域名，且服务器没有正确设置CORS响应头，那么Canvas一旦绘制该图片，就会被标记为污染状态。此时调用toBlob或toDataURL会抛出SecurityError异常。解决办法是在Image对象上设置crossOrigin属性为anonymous，并且图片服务器必须返回Access-Control-Allow-Origin响应头。如果服务器不可控，就只能放弃前端压缩，改为上传原图由后端处理。

移动端浏览器对Canvas尺寸有硬件限制，尤其是iOS Safari。一般来说，Canvas的总像素数不能超过大约16777216（4096×4096），部分设备更低。如果原图尺寸超过这个限制，绘制时可能不报错，但导出的图片会空白或只显示一部分。因此压缩前应该先判断并限制最大宽高，将尺寸控制在安全范围内。常见做法是设定最大边不超过4096，或者根据设备动态获取上限。

透明背景变黑是另一个让人头疼的问题。当图片带有Alpha通道时，如果导出为JPEG格式，由于JPEG本身不支持透明，透明区域会默认填充为黑色。这会导致上传后的图片出现难看的黑块。解决方式很简单：在绘制前先用fillRect填充白色背景，再绘制图片。代码示例如下：

function compressWithWhiteBg(img, maxWidth, quality) {
  var canvas = document.createElement('canvas');
  var width = img.width;
  var height = img.height;
  if (width > maxWidth) {
    height = Math.round(height * (maxWidth / width));
    width = maxWidth;
  }
  canvas.width = width;
  canvas.height = height;
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = '#fff';
  ctx.fillRect(0, 0, width, height);
  ctx.drawImage(img, 0, 0, width, height);
  return new Promise(function(resolve, reject) {
    canvas.toBlob(function(blob) {
      resolve(blob);
    }, 'image/jpeg', quality);
  });
}

通过先画一层白色背景，再绘制图片，导出的JPEG就不会再出现黑底。如果必须保留透明效果，就只能导出PNG或WebP格式。另外，GIF动画和SVG图片在前端Canvas压缩中没有很好的支持，GIF会被绘制成第一帧，SVG可能因安全策略被拒，这些场景建议由后端处理或使用专用库。

总的来说，JS压缩图片是一项非常实用的前端技能。掌握Canvas绘制与编码的原理，再结合文件读取、尺寸计算、格式选择和质量调优，完全可以在浏览器端实现一套轻量、高效的图片压缩方案。遇到跨域、尺寸限制、透明背景等问题时，只要对症下药，就能保证压缩功能稳定运行。