红孩儿编辑器的模块设计12
红孩儿编辑器的模块设计12
插入图像的逻辑
插入图像需要解决的问题有如下的几个：
1如何把图像的文件上传到系统的内存中
2如何解析图像文件的数据流
3如何显示图像的信息
第一个问题使用了HTML5的File API进行实现。暂不展开叙述
第二个问题是本篇的重点讨论对象。
为了解析图像的文件数据流，需要了解图像文件的格式，不同的图像文件
格式，采用了不同的编码与解码方案。本系统首先默认实现的是对PNG图
像格式的解析。以后再加上对jpg,gif等格式的解析。
png格式的文件，在文件头有八个字节的署名区，对解析它的程序表明:
我是png格式的图像，不是文本文件。然后它有各种类型的数据块，
4种关键性的数据块和14种非关键性的数据块。关键性的数据块，解析程序
必须对它进行处理，非关键性的数据块可以忽略。这四种关键性的数据块
分别是文件头，调色板，图像数据，文件尾。
每个数据块的结构是四个字节的长度信息，四个字节的数据块的类型信息，
不定长度的数据块内的数据信息，四个字节的CRC校验码。特定的数据块
可能没有数据块内的数据信息，例如文件尾这个数据块。长度的信息仅包括
了数据信息的长度。
编码流程如下：
1传递抽取，2扫描行的序列化，3 过滤，4压缩，5。数据块化
解码流程是编码流程的逆过程。
具体的PNG的格式的详细细节情况，见 png格式的规范的翻译的系列文章。
我们对Png数据流的解析，首先是解析文件头数据块，得到图像的长和宽，
位深度，颜色类型，压缩方法，过滤方法和交织方法 这些重要的元数据信息。
其次解析调色板的信息。对于某些图像调色板可能没有使用，这就不用解析这个数据块了。
重点是对图像的数据信息块进行解码操作。解码由上述的五个步骤组成，所以
每个步骤对应的操作，分别由解码器的一个模块来负责。
第三个问题在HTML5的画布上有相应的显示函数来完成，也不展开了。