正文

如何轻松控制JS上传图片尺寸，避免过大文件占用空间？

/0 浏览量
1102

在网页开发中，处理图片上传是一个常见的需求。然而，用户上传的图片如果过大，不仅会占用过多的服务器空间，还会导致页面加载缓慢，影响用户体验。因此，我们需要在客户端（JavaScript）对上传的图片进行尺寸控制。下面，我将详细介绍如何在JavaScript中轻松控制上传图片的尺寸，避免过大文件占用空间。

1. 获取图片文件

首先，我们需要获取用户上传的图片文件。这可以通过HTML的<input type="file">元素实现。

<input type="file" id="imageInput" accept="image/*">

2. 读取图片文件

使用JavaScript的FileReader对象，我们可以读取图片文件并获取其DataURL。

const fileInput = document.getElementById('imageInput');
fileInput.addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = function(e) {
      const img = new Image();
      img.src = e.target.result;
      img.onload = function() {
        // 图片加载完成后，进行尺寸控制
      };
    };
    reader.readAsDataURL(file);
  }
});

3. 控制图片尺寸

在图片加载完成后，我们可以使用HTMLCanvasElement来控制图片尺寸。

img.onload = function() {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const maxWidth = 800; // 设置最大宽度
  const maxHeight = 600; // 设置最大高度
  let width = img.width;
  let height = img.height;

  // 计算宽高比例，进行等比缩放
  if (width > maxWidth || height > maxHeight) {
    if (width / height > maxWidth / maxHeight) {
      width = maxWidth;
      height = (maxWidth * height) / width;
    } else {
      height = maxHeight;
      width = (maxHeight * width) / height;
    }
  }

  // 设置canvas尺寸
  canvas.width = width;
  canvas.height = height;

  // 将图片绘制到canvas上
  ctx.drawImage(img, 0, 0, width, height);

  // 获取压缩后的图片DataURL
  const newDataUrl = canvas.toDataURL('image/jpeg', 0.7); // 压缩图片，质量为0.7

  // 可以将newDataUrl设置到img元素的src属性，或者上传到服务器
};

4. 上传图片

将压缩后的图片上传到服务器，可以使用以下代码：

const uploadBtn = document.getElementById('uploadBtn');
uploadBtn.addEventListener('click', function() {
  const formData = new FormData();
  formData.append('image', dataURItoBlob(newDataUrl));

  // 使用fetch API上传图片
  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log('图片上传成功:', data);
  })
  .catch(error => {
    console.error('图片上传失败:', error);
  });
});

// 将DataURL转换为Blob对象
function dataURItoBlob(dataURI) {
  const byteString = atob(dataURI.split(',')[1]);
  const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ab], {type: mimeString});
}

通过以上步骤，我们可以在JavaScript中轻松控制上传图片的尺寸，避免过大文件占用空间。同时，还可以根据实际需求调整压缩图片的质量和尺寸。

-- 展开阅读全文 --