深入解析PNG文件：JavaScript揭秘IHDR块结构与信息提取

软考鸭

于 2024-08-25 10:06:23 发布

阅读量654

点赞数 4

分类专栏： nodejs帮助文档 javascript帮助文档文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/gusushantang/article/details/141525850

版权

nodejs帮助文档同时被 2 个专栏收录

164 篇文章 1 订阅

订阅专栏

javascript帮助文档

72 篇文章 1 订阅

订阅专栏

PNG（Portable Network Graphics）格式因其无损压缩、支持透明以及丰富的元数据而备受青睐。在PNG文件的结构中，IHDR块（Image Header chunk）扮演着至关重要的角色，它包含了图像的基本信息。本文将借助JavaScript代码，全面解析PNG文件的IHDR块，深入剖析其结构以及各个字段的含义。

PNG文件结构简述

PNG文件由8字节的文件签名和一系列数据块（chunk）组成。每个数据块都包括长度（Length）、类型（Type）、数据（Data）和CRC（Cyclic Redundancy Check）校验码四个部分。其中，IHDR块是PNG文件中的第一个数据块，也是关键数据块之一，它包含了图像的核心信息。

IHDR块结构解析

IHDR块的结构非常严谨，它包含了图像的基本属性，如宽度、高度、位深度等。以下是IHDR块的具体结构：

长度（Length）：固定为13字节，代表IHDR块数据部分的长度。
类型（Type）：固定为"IHDR"，标识这是一个文件头数据块。
数据（Data）：包含图像的基本信息，共13字节，具体分为：
- 宽度（Width）：4字节，表示图像的宽度（像素为单位）。
- 高度（Height）：4字节，表示图像的高度（像素为单位）。
- 位深度（Bit depth）：1字节，表示每个像素的颜色通道位数。
- 颜色类型（Color type）：1字节，定义图像的颜色模式及是否包含alpha通道。
- 压缩方法（Compression method）：1字节，目前PNG只使用0值，代表LZ77派生算法。
- 滤波器方法（Filter method）：1字节，目前PNG只使用0值，代表自适应滤波器。
- 扫描方法（Interlace method）：1字节，定义图像的扫描方式，0为非隔行扫描，1为Adam7隔行扫描。
CRC校验码（CRC）：4字节，用于校验IHDR块数据部分的完整性。

JavaScript代码解析IHDR块

以下是一个使用JavaScript解析PNG文件并提取IHDR块信息的示例代码：

function parsePng(uint8Array) {
    let offset = 0;
    const signature = [0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A];

    // 验证PNG签名
    for (let i = 0; i < signature.length; i++) {
        if (uint8Array[offset + i] !== signature[i]) {
            return null;
        }
    }
    offset += signature.length;

    let png = {};

    // 循环处理PNG的数据块
    while (offset < uint8Array.length) {
        const length = readUint32(uint8Array, offset);
        const type = readString(uint8Array, offset + 4, 4);
        offset += 8;

        if (type === 'IHDR') {
            png.ihdr = parseIhdr(uint8Array, offset, length);
            break; // 找到IHDR块后退出循环
        }

        offset += length + 4; // 跳过数据块和CRC校验码
    }

    return png;
}

function readUint32(uint8Array, offset) {
    return (uint8Array[offset] << 24) | (uint8Array[offset + 1] << 16) |
           (uint8Array[offset + 2] << 8) | uint8Array[offset + 3];
}

function readString(uint8Array, offset, length) {
    let str = '';
    for (let i = 0; i < length; i++) {
        str += String.fromCharCode(uint8Array[offset + i]);
    }
    return str;
}

function parseIhdr(uint8Array, offset, length) {
    const ihdr = {};
    ihdr.width = readUint32(uint8Array, offset);
    ihdr.height = readUint32(uint8Array, offset + 4);
    ihdr.bitDepth = uint8Array[offset + 8];
    ihdr.colorType = uint8Array[offset + 9];
    ihdr.compressionMethod = uint8Array[offset + 10];
    ihdr.filterMethod = uint8Array[offset + 11];
    ihdr.interlaceMethod = uint8Array[offset + 12];
    return ihdr;
}

// 示例：使用FileReader读取PNG文件并解析IHDR块
document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (!file.type.match('image/png')) {
        alert('请选择一个PNG文件。');
        return;
    }

    const reader = new FileReader();
    reader.onload = function(e) {
        const arrayBuffer = reader.result;
        const uint8Array = new Uint8Array(arrayBuffer);
        const png = parsePng(uint8Array);

        if (png && png.ihdr) {
            console.log('IHDR块解析成功！');
            console.log(png.ihdr);
        } else {
            console.log('未找到IHDR块或PNG文件无效。');
        }
    };

    reader.readAsArrayBuffer(file);
});