用原生 JS 手写一个超好用的前端图片压缩上传插件

正文

前端图片上传已经是老生常谈的话题了，不过今天我们要从“手写”的角度来重新审视它。与直接套用现有插件不同，自己编写图片压缩上传插件不仅能加深我们对相关知识的理解，而且还能根据实际需求定制功能。

步骤分解

1. 获取图片文件

使用 <input type="file"> 输入标签获取图片文件。它会返回一个包含所选文件的文件对象数组。

2. 读取文件并压缩图片

使用 FileReader API 读取图片文件，然后使用 Canvas API 创建一个新的画布，并将图片绘制到画布上。通过调整画布大小，我们可以实现图片压缩。

3. 将压缩后的图片转换为 Base64 字符串

压缩后的图片需要转换为 Base64 字符串，以便通过 HTTP 请求上传。使用 toDataURL() 方法可以将画布转换为 Base64 字符串。

4. 上传图片

使用 XMLHttpRequest 或 fetch() API 发起 HTTP 请求，将 Base64 字符串作为请求正文上传图片。

5. 后端处理和存储

后端服务器收到上传的图片后，可以进行进一步的处理，如将图片保存到数据库或文件系统。

实例代码

const input = document.querySelector('input[type="file"]');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = (e) => {
    const image = new Image();
    image.onload = () => {
      canvas.width = image.width;
      canvas.height = image.height;
      ctx.drawImage(image, 0, 0);
      const dataURL = canvas.toDataURL('image/jpeg', 0.5);  // 调整第二个参数可以控制压缩质量

      // 上传 dataURL 到服务器
    };

    image.src = e.target.result;
  };

  reader.readAsDataURL(file);
});

总结

通过原生 JS 手写前端图片压缩上传插件，我们可以灵活地满足不同需求，如控制压缩质量、添加水印或进行格式转换。掌握这些技术可以帮助我们在实际项目中更好地处理图片上传任务。