利用js实现图片压缩功能

在JavaScript中，可以使用Canvas元素来压缩图片。以下是一个简单的函数，用于压缩图片并返回一个新的图片URL：

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 width = img.width > maxWidth ? maxWidth : img.width;
    const height = (width / img.width) * img.height;
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(img, 0, 0, width, height);
    const newDataUrl = canvas.toDataURL('image/jpeg', quality);
    callback(newDataUrl);
  };
}
 
// 使用示例
compressImage('path/to/your/image.jpg', 0.7, 800, function(compressedImageUrl) {
  console.log('Compressed image URL:', compressedImageUrl);
  // 可以将compressedImageUrl设置为img元素的src或用于上传等
});

这个函数接受图片路径、压缩质量和最大宽度作为参数，并在图片加载完成后进行压缩。压缩完成后，会调用回调函数并传入新的图片URL。