js 判断图片格式

在JavaScript中判断图片格式可以通过多种方式实现，主要依据的是图片文件的二进制数据特征或者文件扩展名。以下介绍几种常见的方法：

一、基于文件扩展名的判断

这是最简单直接的方法，但可靠性相对较低，因为文件扩展名可以被轻易修改。

function getImageFormatByExtension(filename) {
    const ext = filename.split('.').pop().toLowerCase();
    const formats = {
        'jpg': 'image/jpeg',
        'jpeg': 'image/jpeg',
        'png': 'image/png',
        'gif': 'image/gif',
        'bmp': 'image/bmp',
        'webp': 'image/webp'
    };
    return formats[ext] || 'application/octet-stream';
}

// 使用示例
const format = getImageFormatByExtension('example.jpg');
console.log(format); // 输出: image/jpeg

二、基于文件头信息的判断（更可靠）

每种图片格式都有其特定的文件头（Magic Number），可以通过读取文件的前几个字节来判断图片格式。

function getImageFormatByHeader(file) {
    const header = new Uint8Array(file.slice(0, 4));
    const signatures = {
        'jpeg': [0xFF, 0xD8, 0xFF],
        'png': [0x89, 0x50, 0x4E, 0x47],
        'gif': [0x47, 0x49, 0x46],
        'bmp': [0x42, 0x4D],
        'webp': [0x52, 0x49, 0x46, 0x46]
    };

    for (const [format, signature] of Object.entries(signatures)) {
        let match = true;
        for (let i = 0; i < signature.length; i++) {
            if (header[i] !== signature[i]) {
                match = false;
                break;
            }
        }
        if (match) return `image/${format}`;
    }
    return 'application/octet-stream';
}

// 使用示例（在浏览器环境中，file为File对象）
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', function(event) {
    const file = event.target.files[0];
    const format = getImageFormatByHeader(file);
    console.log(format); // 输出对应的图片格式
});