前端疑难纪要

图像处理

缩略图生成

1. 解析DataURL，获取图片的原始数据和MIME类型。
2. 读取图片: 使用Node.js的fs模块或Buffer来读取图片数据。
3. 调整图片大小: 使用图像处理库，如sharp或Jimp，来调整图片的大小。
4. 降低图片质量: 在调整大小的同时，可以降低图片的质量，以生成更低分辨率的缩略图。
5. 输出图片: 将处理后的图片输出为新的文件或返回给客户端。

一个使用sharp库的示例代码：将DataURL转换为Buffer，然后使用sharp库来调整图片大小并降低JPEG图片的质量以生成缩略图。

import sharp from 'sharp';

// 假设dataURL是传入的图片的DataURL
const dataURL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAU...';

// 获取图片数据和MIME类型
const data = dataURL.split(',')[1]; // 去除前缀，获取base64编码的数据
const mimeType = dataURL.split(',')[0].split(':')[1].split(';')[0]; // 获取MIME类型

// 将base64编码的数据转换为Buffer
const imageBuffer = Buffer.from(data, 'base64');

// 使用sharp库处理图片
sharp(imageBuffer)
  .toFormat(mimeType === 'image/jpeg' ? 'jpeg' : 'png') // 根据MIME类型设置输出格式
  .resize(100, 100) // 设置缩略图的尺寸，例如100x100像素
  .jpeg({ quality: 70 }) // 设置JPEG图片的质量，数值越低，图片质量越低
  .toBuffer()
  .then((buffer: Buffer) => {
    // 处理后的图片数据存储在buffer中
    // 这里可以进一步操作，比如写入文件系统或发送给客户端
    console.log('Thumbnail generated:', buffer);
  })
  .catch((err: Error) => {
    console.error('Error generating thumbnail:', err);
  });

表单

迭代器

js
const formData = new FormData();
// 添加表单数据到 formData 对象
// ...
// 使用 formData.entries() 迭代键值对
for (const [key, value] of formData.