js 图片上传怎么缩小到1m

JS 图片上传怎么缩小到1M

使用Canvas进行压缩、调整图像质量、改变图像格式、限制图像尺寸。使用Canvas进行压缩是最常见且有效的方法之一，它通过在前端对图片进行处理，可以大大减少服务器的负担。Canvas API允许你绘制图像并重新调整它们的大小和格式，从而使文件大小减小。以下是详细描述如何使用Canvas进行压缩的步骤。

一、使用Canvas进行压缩

Canvas API是HTML5引入的一个强大工具，它提供了绘制图像和图形的功能。通过Canvas，你可以在上传前调整图片的尺寸、质量和格式，减少图片的文件大小。

1、获取图片文件

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

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

然后，在JavaScript中获取该文件：

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', handleFileChange);
function handleFileChange(event) {
  const file = event.target.files[0];
  if (file) {
    compressImage(file);
  }
}

2、读取图片文件

接下来，我们需要读取图片文件并将其加载到Canvas中。可以使用FileReader API来完成这个任务。

function compressImage(file) {
  const reader = new FileReader();
  reader.onload = function(event) {
    const img = new Image();
    img.onload = function() {
      resizeImage(img);
    };
    img.src = event.target.result;
  };
  reader.readAsDataURL(file);
}

3、调整图像尺寸和质量

一旦图片加载到Canvas中，我们可以使用Canvas API来调整图片的尺寸和质量。你可以根据需要设置目标宽度和高度。

function resizeImage(img) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const maxWidth = 1024; // 设置最大宽度
  const maxHeight = 1024; // 设置最大高度
  let width = img.width;
  let height = img.height;
  if (width > height) {
    if (width > maxWidth) {
      height *= maxWidth / width;
      width = maxWidth;
    }
  } else {
    if (height > maxHeight) {
      width *= maxHeight / height;
      height = maxHeight;
    }
  }
  canvas.width = width;
  canvas.height = height;
  ctx.drawImage(img, 0, 0, width, height);
  const quality = 0.7; // 设置图像质量
  const compressedDataUrl = canvas.toDataURL('image/jpeg', quality);
  uploadImage(compressedDataUrl);
}

4、上传压缩后的图片

最后，你可以将压缩后的图片上传到服务器。这里我们假设使用的是AJAX来上传图片。

function uploadImage(dataUrl) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log('上传成功');
    }
  };
  const data = {
    image: dataUrl
  };
  xhr.send(JSON.stringify(data));
}

二、调整图像质量

在使用Canvas进行压缩时，调整图像质量也是一个关键因素。通过降低图像质量，你可以显著减少文件大小。

const quality = 0.5; // 质量范围在0到1之间
const compressedDataUrl = canvas.toDataURL('image/jpeg', quality);

三、改变图像格式

将图片格式从PNG转换为JPEG可以进一步减少文件大小。JPEG格式通常比PNG格式更适合压缩照片和复杂图像。

const compressedDataUrl = canvas.toDataURL('image/jpeg', quality);

四、限制图像尺寸

限制图像的尺寸也是减少文件大小的有效方法。你可以根据实际需求设置最大宽度和高度。

const maxWidth = 1024;
const maxHeight = 1024;

五、使用第三方库

除了手动使用Canvas API进行压缩，你还可以使用一些第三方库，如compress.js、pica.js等。这些库提供了更高级和便捷的功能，帮助你更好地处理图像压缩任务。

1、Compress.js

Compress.js是一个轻量级的JavaScript库，专门用于压缩和调整图像大小。

const compress = new Compress();
const files = [...fileInput.files];
compress.compress(files, {
  size: 1, // 最大文件大小（MB）
  quality: 0.75, // 图像质量
  maxWidth: 1024,
  maxHeight: 1024,
  resize: true // 是否调整图像大小
}).then((results) => {
  const img = results[0];
  const base64str = img.data;
  const imgExt = img.ext;
  const file = Compress.convertBase64ToFile(base64str, imgExt);
  uploadImage(file);
});

2、Pica.js

Pica.js是另一个用于高质量图像处理的库，尤其适合需要高保真的场景。

const pica = new Pica();
const fromCanvas = document.createElement('canvas');
const toCanvas = document.createElement('canvas');
fromCanvas.width = img.width;
fromCanvas.height = img.height;
const ctx = fromCanvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const scale = 0.5; // 缩放比例
toCanvas.width = img.width * scale;
toCanvas.height = img.height * scale;
pica.resize(fromCanvas, toCanvas)
  .then(result => pica.toBlob(result, 'image/jpeg', 0.8))
  .then(blob => {
    // 处理压缩后的图像blob
    const file = new File([blob], 'compressed_image.jpg', { type: 'image/jpeg' });
    uploadImage(file);
  });

六、综合使用PingCode和Worktile进行图片上传管理

对于需要多团队协作和项目管理的情况，使用研发项目管理系统PingCode和通用项目协作软件Worktile可以大大提高效率。PingCode提供了专业的研发项目管理功能，适合技术团队使用，而Worktile则适用于一般的项目协作场景。

1、PingCode的优势

PingCode可以帮助你管理开发流程中的图片处理任务，并与版本控制系统无缝集成。你可以在PingCode中创建任务，指定图片处理的需求，并跟踪任务的完成情况。

2、Worktile的优势

Worktile提供了灵活的任务管理和协作功能，适用于跨部门的图片处理任务。你可以在Worktile中创建任务板，分配任务，并实时跟踪进度。

通过以上步骤和工具，你可以高效地进行图片的压缩和上传，确保图片文件大小在1MB以内，并提高项目管理的效率。