js图片压缩

在JavaScript中进行图片压缩可以使用HTML5的Canvas元素和File API来实现。以下是一个简单的例子：

首先，需要在HTML中创建一个input元素，用户可以通过该元素选择要压缩的图片文件：

<input type="file" id="image-input">

然后，在JavaScript中获取用户选择的图片文件，并将其加载到Canvas中：

const imageInput = document.getElementById('image-input');
imageInput.addEventListener('change', function() {
  const file = imageInput.files[0];
  const reader = new FileReader();
  reader.onload = function(event) {
    const image = new Image();
    image.onload = function() {
      compressImage(image, 0.5); // 压缩图片
    };
    image.src = event.target.result;
  };
  reader.readAsDataURL(file);
});

接下来，编写一个函数来压缩图片。该函数将接收一个Image对象和压缩比例作为参数：

function compressImage(image, compressionRatio) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  // 设置Canvas的大小为图片的实际大小
  canvas.width = image.width;
  canvas.height = image.height;

  // 在Canvas上绘制图片
  context.drawImage(image, 0, 0);

  // 将Canvas转换为DataURL
  const compressedDataUrl = canvas.toDataURL('image/jpeg', compressionRatio);

  // 创建一个新的Image对象，用于显示压缩后的图片
  const compressedImage = new Image();
  compressedImage.src = compressedDataUrl;

  // 将压缩后的图片显示在页面上
  document.body.appendChild(compressedImage);
}

在上面的例子中，compressImage函数将图片绘制到Canvas上，并使用toDataURL方法将Canvas转换为压缩后的DataURL。然后，创建一个新的Image对象，并将DataURL赋值给它，最后将压缩后的图片显示在页面上。

请注意，压缩比例是一个0到1之间的数字，0表示最高压缩率（最大压缩），1表示无压缩。

这只是一个简单的示例，实际的图片压缩可能需要更多的处理和优化