JS妙用：巧识图片无名氏，自动命名更从容

2023-11-28 10:33:33

无名图片的难题：识别困难，更名繁琐

在互联网的汪洋大海中，你常常会遇到这样一种情况：当你从网上下载图片时，这些图片往往没有后缀来标明它们的文件类型。这是因为，图片文件的后缀名只是用于帮助人们识别和区分不同类型图片文件的，对于计算机来说，这些后缀名其实是没有必要的，即使你用剪刀将图片文件的后缀名剪掉，对图片本身的内容和显示效果都不会造成任何影响。

没有后缀名的图片，就像是一个失去名字的人，难以被准确识别和管理。当你想要打开这样的图片时，可能还会遇到无法识别其类型而导致无法打开的情况。更麻烦的是，如果你想要对这些图片进行批量处理，比如批量修改名称、批量转换格式等，没有后缀名也会让你的操作变得十分繁琐。

JS出马：自动识别，轻松命名

为了解决图片无后缀带来的难题，聪明的程序员们发明了JavaScript代码。JavaScript是一种可以运行在浏览器中的脚本语言，它可以帮助我们对网页和网页中的元素进行操作。利用JavaScript，我们可以轻松识别图片文件的真实类型，并自动为它们添加合适的扩展名。

这里，我将分享一段JavaScript代码，它可以识别图片文件的类型并自动为它们命名。代码如下：

function identifyImageType(file) {
  // 获取图片文件的二进制数据
  const reader = new FileReader();
  reader.onload = function () {
    // 将二进制数据转换为Base64字符串
    const base64String = reader.result;

    // 从Base64字符串中提取图片的MIME类型
    const mimeType = base64String.match(/data:image\/(.+);base64/)[1];

    // 根据MIME类型获取图片文件的扩展名
    const extension = mimeTypeToExtension(mimeType);

    // 将图片文件的扩展名添加到文件名中
    const newFileName = file.name + '.' + extension;

    // 使用新的文件名保存图片文件
    saveImageFile(file, newFileName);
  };

  reader.readAsDataURL(file);
}

function mimeTypeToExtension(mimeType) {
  switch (mimeType) {
    case 'jpeg':
      return 'jpg';
    case 'png':
      return 'png';
    case 'gif':
      return 'gif';
    case 'bmp':
      return 'bmp';
    case 'svg':
      return 'svg';
    default:
      return '';
  }
}

function saveImageFile(file, newFileName) {
  // 创建一个新的文件对象
  const newFile = new File([file], newFileName, { type: file.type });

  // 将新的文件对象保存到本地
  saveAs(newFile);
}