js 怎么查看图片格式

在JavaScript中查看图片格式的方法包括：读取图片的文件扩展名、使用File API读取文件头部、使用Canvas API获取图片数据等。其中，读取图片的文件扩展名是最直接的方法，使用File API读取文件头部可以通过解析图片的二进制数据来判断格式，使用Canvas API获取图片数据则能进一步分析图片的实际内容和格式。

一、读取图片的文件扩展名

读取图片的文件扩展名是最简单且常见的方法。通过文件名的后缀，可以直接判断图片的格式。

function getFileExtension(filename) {
    return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);
}
const filename = "example.jpg";
const extension = getFileExtension(filename);
console.log(extension); // 输出: jpg

这种方法的优点是简单快捷，但它依赖于文件名的正确性。如果文件名被修改或不包含扩展名，这种方法就会失效。

二、使用File API读取文件头部

使用File API读取文件头部可以更准确地判断图片格式，因为它直接读取文件的二进制数据。每种图片格式在文件头部都有特定的签名（Magic Number），可以通过这些签名来识别图片格式。

function getImageFormat(file) {
    const reader = new FileReader();
    reader.onloadend = function(event) {
        const arr = (new Uint8Array(event.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 "47494638":
                type = "gif";
                break;
            case "ffd8ffe0":
            case "ffd8ffe1":
            case "ffd8ffe2":
                type = "jpeg";
                break;
            default:
                type = "unknown";
                break;
        }
        console.log(type); // 输出图片格式
    };
    reader.readAsArrayBuffer(file.slice(0, 4));
}
// 示例：使用<input>元素选择文件
document.querySelector('input[type="file"]').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        getImageFormat(file);
    }
});

此方法通过读取文件的前几个字节来识别图片格式，具有较高的准确性，不依赖文件名。

三、使用Canvas API获取图片数据

Canvas API可以用来获取图片的像素数据，进一步分析图片的实际内容和格式。虽然这种方法不如前两种直接，但它在某些高级应用中非常有用。

function getImageFormatFromCanvas(image) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0, 0);
    canvas.toBlob((blob) => {
        console.log(blob.type); // 输出图片的MIME类型
    });
}
// 示例：加载图片并使用Canvas API
const img = new Image();
img.onload = function() {
    getImageFormatFromCanvas(img);
};
img.src = 'example.jpg';

这种方法通过将图片绘制到Canvas元素上，然后获取其数据，可以用于进一步的图片处理和分析。

四、综合使用与实际应用

在实际应用中，可以根据具体需求和场景选择上述方法中的一种或组合使用。例如，在文件上传的场景中，可以先通过文件扩展名进行初步判断，然后使用File API进行进一步验证，以确保文件的正确性和安全性。

document.querySelector('input[type="file"]').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        const extension = getFileExtension(file.name);
        if (['jpg', 'jpeg', 'png', 'gif'].includes(extension.toLowerCase())) {
            getImageFormat(file);
        } else {
            console.log('Unsupported file format');
        }
    }
});

这种综合使用的方法既保证了操作的简便性，又提高了文件格式判断的准确性，是一种常见的实践方式。

五、总结

在JavaScript中查看图片格式的方法包括：读取图片的文件扩展名、使用File API读取文件头部、使用Canvas API获取图片数据。根据具体需求和场景，可以选择适合的方法或组合使用。通过合理的判断和处理，可以确保图片文件的正确性和安全性，从而提高应用的可靠性和用户体验。