js 怎么判断图片格式

判断图片格式的几种方法有：通过文件扩展名、通过MIME类型、通过读取文件头、通过使用JavaScript内置的FileReader API。其中，使用JavaScript内置的FileReader API是一种较为全面和可靠的方法。该方法可以直接读取图片文件的二进制数据，并通过分析文件头信息来确定图片格式。下面将详细介绍这一方法。

一、通过文件扩展名

通过文件扩展名来判断图片格式是最简单的一种方法，但这种方法不够可靠，因为用户可以随意更改文件的扩展名。

function getImageExtension(filename) {
    return filename.split('.').pop().toLowerCase();
}
const filename = 'image.jpg';
console.log(getImageExtension(filename)); // 输出 'jpg'

二、通过MIME类型

通过MIME类型判断图片格式是一种相对可靠的方法，但前提是你能够访问到文件的MIME类型。

function getImageMimeType(file) {
    return file.type;
}
const file = document.querySelector('input[type="file"]').files[0];
console.log(getImageMimeType(file)); // 输出 'image/jpeg' 或其他 MIME 类型

三、通过读取文件头

通过读取文件头可以比较准确地判断图片格式。不同类型的图片在文件头部分有特定的二进制标识。

function getImageFormatByHeader(file, callback) {
    const reader = new FileReader();
    reader.onloadend = function(e) {
        const arr = new Uint8Array(e.target.result).subarray(0, 4);
        let header = "";
        for(let i = 0; i < arr.length; i++) {
            header += arr[i].toString(16);
        }
        let type = "";
        switch (header) {
            case "89504e47":
                type = "png";
                break;
            case "ffd8ffe0":
            case "ffd8ffe1":
            case "ffd8ffe2":
                type = "jpeg";
                break;
            case "47494638":
                type = "gif";
                break;
            default:
                type = "unknown";
                break;
        }
        callback(type);
    };
    reader.readAsArrayBuffer(file.slice(0, 4));
}
const file = document.querySelector('input[type="file"]').files[0];
getImageFormatByHeader(file, function(format) {
    console.log(format); // 输出 'png', 'jpeg', 'gif' 或 'unknown'
});

四、使用JavaScript内置的FileReader API

使用JavaScript内置的FileReader API可以直接读取图片文件的二进制数据，并通过分析文件头信息来确定图片格式。这种方法不仅可靠，还可以确保对各种图片格式进行准确判断。

function detectImageFormat(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onloadend = function(e) {
            const arr = new Uint8Array(e.target.result).subarray(0, 4);
            let header = "";
            for(let i = 0; i < arr.length; i++) {
                header += arr[i].toString(16);
            }
            switch (header) {
                case "89504e47":
                    resolve("png");
                    break;
                case "ffd8ffe0":
                case "ffd8ffe1":
                case "ffd8ffe2":
                    resolve("jpeg");
                    break;
                case "47494638":
                    resolve("gif");
                    break;
                default:
                    resolve("unknown");
                    break;
            }
        };
        reader.onerror = function() {
            reject("Failed to read the file");
        };
        reader.readAsArrayBuffer(file.slice(0, 4));
    });
}
const file = document.querySelector('input[type="file"]').files[0];
detectImageFormat(file).then(format => {
    console.log(format); // 输出 'png', 'jpeg', 'gif' 或 'unknown'
}).catch(error => {
    console.error(error);
});

五、应用实例

1、文件上传时判断图片格式

在实际应用中，我们常常需要在文件上传时判断图片格式，以确保用户上传的是支持的图片格式。

<input type="file" id="imageUpload" accept="image/*">
<p id="result"></p>
<script>
    document.getElementById('imageUpload').addEventListener('change', function() {
        const file = this.files[0];
        detectImageFormat(file).then(format => {
            document.getElementById('result').innerText = `Image format: ${format}`;
        }).catch(error => {
            document.getElementById('result').innerText = `Error: ${error}`;
        });
    });
</script>

2、动态图片格式判断

在一些高级应用中，我们可能需要动态地判断图片格式，并根据格式执行不同的操作。

function handleImageUpload(file) {
    detectImageFormat(file).then(format => {
        switch (format) {
            case "png":
                console.log("Processing PNG image");
                // 处理 PNG 图片
                break;
            case "jpeg":
                console.log("Processing JPEG image");
                // 处理 JPEG 图片
                break;
            case "gif":
                console.log("Processing GIF image");
                // 处理 GIF 图片
                break;
            default:
                console.log("Unsupported image format");
                // 处理不支持的图片格式
                break;
        }
    }).catch(error => {
        console.error("Error processing image:", error);
    });
}
const file = document.querySelector('input[type="file"]').files[0];
handleImageUpload(file);

六、总结

判断图片格式的方法有很多种，但使用JavaScript内置的FileReader API是较为全面和可靠的方法。通过读取文件头信息，我们可以准确地判断图片的格式，并根据格式执行相应的操作。这不仅提高了代码的鲁棒性，还增强了用户体验。在实际应用中，可以根据具体需求选择合适的方法来判断图片格式。

推荐使用研发项目管理系统PingCode或通用项目协作软件Worktile来管理和协作这些代码和项目，以提升团队效率和项目管理的规范性。