前端 JS 压缩图片的思路

在前端使用JavaScript压缩图片的一种常见方法是使用Canvas元素。以下是压缩图片的基本步骤和示例代码：

1. 创建一个Canvas元素。
2. 使用drawImage方法将图片绘制到Canvas上。
3. 使用toDataURL方法以较低的质量导出图片。

function compressImage(src, quality, maxWidth, callback) {
  const img = new Image();
  img.src = src;
  img.onload = function () {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const ratio = maxWidth / img.width;
    const scaledWidth = Math.min(maxWidth, img.width);
    const scaledHeight = img.height * ratio;
 
    canvas.width = scaledWidth;
    canvas.height = scaledHeight;
    ctx.drawImage(img, 0, 0, scaledWidth, scaledHeight);
 
    const dataUrl = canvas.toDataURL('image/jpeg', quality);
    callback(dataUrl);
  };
}
 
// 使用示例
compressImage('path/to/your/image.jpg', 0.7, 800, function(compressedImage) {
  console.log('Compressed image:', compressedImage);
  // 在这里可以将compressedImage作为DataURL使用，例如设置为img元素的src或上传到服务器
});

这段代码定义了一个compressImage函数，它接受图片路径、压缩质量和最大宽度作为参数，并在图片加载后进行压缩。压缩完成后，会调用callback函数并传递压缩后的图片数据URL。