png图片原理解析

in 前端 with 1 comment

png图片原理解析

png图片的数据结构

参考

一个数据头后面跟着很多的数据块

png的数据头是 8950 4e47 0d0a 1a0a,所有png的数据头都是这一串编码,数据头后面跟着的是IHDR数据块的长度,如 0000 0007表示的数据长度是7,接着就是数据块的type,为IHDR,如 4948 4452,接下来是图片的宽度,如 0000 000a 和图片的高度,如0000 03a5

获取图片的头信息

// 图片的ArrayBuffer数据我们用 `arrayBuffer`来表示
let dataView = new DataView(arrayBuffer)
let arr = []
for (let i = 0; i <= 7; i++>) {
    arr.push(dataView.getUnit8(i))
}
console.log(arr.join(' '))

不根据文件后缀名来判断是不是png图片

<input type='file' id='pic' />
<script>
    const inputEl = document.getElementById('pic')
    inputEl.onchange = function (e) {
        const files = e.target.files
        const file = files[0]
        const reader = new FileReader()
        reader.onloaded = function (result) {
            let arrayBuffer = e.currentTarget.result
            let dataView = new DataView(arrayBuffer)
            let selectImgWidth = dataView.getUnit8(18) + dataView.getUnit8(19)
            let selectImgHeight = dataView.getUnit8(22) + dataView.getUnit8(23)
            console.log(`图片的宽: ${selectImgWidth},高:${selectImgHeight}`)
        }

    }
</script>

通过这种方式发现jpg图片的数据头是 ffd8 ffe0 0010 4a46

Responses
  1. ivo

    mark,正好需要

    Reply