注：本文中的版本号是发表时最新的版本号，当您安装时，请安装相应的版本。
首先，建议先安装MSYS：
1、什么是MSYS？
MSYS的全称是Minimal GNU（POSIX）system on Windows，是一个小型的GNU环境，其实就是在Win上使用Linux的命令行进行操作，可以代替cmd来使用。对一些GNU的开源软件，MSYS可能是必需的，因为它们通常需要./configure然后make才能运行。我们将MSYS和MinGW配合使用就可以打造出一个Win下的GNU命令行终端和编译系统。
2、MSYS安装
MSYS可以通过自动安装包进行安装（因为MSYS的更新速度不像MinGW那样快），最新的自动安装包包含了所有的最新的MinGW组件。可以在官网http://sourceforge.net/projects/mingw直接点击Download下载最新的自动安装包，安装时只需要安装MSYS Development Toolkit即可（因为MSYS只支持gcc3，而我们需要使用最新的gcc4.6.2）。剩下的，就是等待，自动安装包会将默认把MSYS安装的C:\MinGW目录下，当然，你也可以将其安装到其他目录。
注：自动安装包的安装步骤，网上有很多文章，且方法也没有过时，可以去参考，这里就不复述，请见谅。
3、安装最新的MinGW
在安装完MSYS后，我们需要安装MinGW。为了安装最新版的MinGW，我们需要手动安装。Source Forge官网提供的MinGW自动安装包安装的版本会比最新版本晚。
首先，你需要7-zip，用来解压gcc的lzma压缩包。
其次，下载MinGW的必须组件：
下载Home / MinGW / Base / binutils /目录下的：binutils-2.22-1-mingw32-bin.tar.lzma；
下载Home / MinGW / Base / gcc / Version4 /下的：gcc-core-4.6.2-1-mingw32-bin.tar.lzma；
下载Home / MinGW / Base / mingw-rt /下的：mingwrt-3.20-mingw32-dev.tar.gz；
下载Home / MinGW / Base / w32api /下的：w32api-3.17-2-mingw32-dev.tar.lzma。
接下来，安装三个必须的库文件：
Home / MinGW / Base / mpfr /下的libmpfr-2.4.1-1-mingw32-dll-1.tar.lzma；
Home / MinGW / Base / mpc /下的libmpc-0.8.1-1-mingw32-dll-2.tar.lzma；
Home / MinGW / Base / gmp /下的libgmp-5.0.1-1-mingw32-dll-10.tar.lzma。
将以上七个文件全部解压到一个文件夹中，其中会含有tar文件，再将这些tar文件解压到一个文件夹中，并将这个文件夹命名为MinGW。将其与安装MSYS时产生的MinGW文件夹合并，然后将C:\MinGW\bin和C:\MinGW\libexec\gcc\mingw32\4.6.2添加到环境变量中（环境变量的添加请参考这里的1.2.1节。）
至此，最基本的MinGW就安装完成了（C++自动包含在内）。
接下来，安装gdb和make：
下载Home / MinGW / Extension / gdb /下的gdb-7.4-2-mingw32-bin.tar.lzma；
下载Home / MinGW / Extension / make /下 的：make-3.82-5-mingw32-bin.tar.lzma；
同样，解压，合并到MinGW下的文件夹，需要注意的是，gdb还需需要用到两个包，所以请到
Home / MinGW / Base / libiconv /下的libiconv-1.14-2-mingw32-dll-2.tar.lzma；
Home / MinGW / Base / gettext 下的libintl-0.18.1.1-2-mingw32-dll-8.tar.lzma。
最后到Home / MinGW / Base / gcc / Version4 /下的libstdc++-4.6.2-1-mingw32-dll-6.tar.lzma，这是标准C++的函数库。将这些文件的dll放到MinGW的bin文件夹中，至此，标准的C/C++编译环境已经搭建完成。
关于Home / MinGW / Base /下各组件的解释：
binutils：MinGW的汇编器和连接器等基础工具；
gettext：GNU国际化与本地化(i18n)函数库；
libiconv：Unicode与其他编码的编码转换库；
Pthread：一套通用的线程库；
mingwrt：MinGW的Runtime；
w32api：win32的API函数的头文件和函数库；
mpc：复数运算库；
gcc：含有多种语言的编译器，其中gcc-core含有C/C++编译器，必须安装。其他语言编译器的根据自己的需要进行安装；
mpfr：高精度的浮点运算库;
gmp：高精度数学函数库；
首先，我们添加框架和样式。
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
现在，让我们来创建页面。这里我们应该注意一下jQuery Mobile和jQTouch的相似性——整个应用程序就是一个html页面，在这个html页面中，特殊标记的div就是这个应用程序的“页面”。在它的基础表单中，这样的“应用程序页面”如下所示：
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
“data-role”参数用来设置div的功能：页面，表头，页面的内容或页脚。另外，必须为data-role="page"的div设置“id”参数才能对这个应用程序进行导航。
另外一个值得一提的参数是“data-theme”。这个参数可以应用到所有的页面元素上，它可以决定使用哪个默认的样式。在这篇文档中，你可以找到一些可用的主题的例子（请点击查阅）。
在我们的应用程序的主页上应该有一个菜单，菜单项分别指向使用这些例子的页面。要创建这样一个菜单，我们需要添加一个ul列表。如下所示：
<ul data-role="listview" data-inset="true" data-theme="a">
<li><a href="#twitter_page">Twitter example</a></li>
<li><a href="#map_page">Map example</a></li>
<li><a href="#search">Search example</a></li>
<li><a href="#about">About</a></li>
</ul>
ul标签的参数：
◆data-role="listview"— 表示这是一个你想要应用样式的列表。
◆data-inset="true" — 非全屏显示一个列表，如果你的目的刚好相反，可以把它设置成“false”。
◆data-theme="a"- 使用哪个配色方案。
jQuery Mobile包含很多列表类型：简单的，带图标的，带图像数据的，等等。在这篇文档中，你可以找到一些例子（请点击查阅）。
此外，我还想把一个设置按钮添加到工具栏上。这是很容易做到的：
<a href="#settings" data-icon="gear" >Options</a>
就像你看到的一样，这个按钮可以把你导航到个性化的页面，在“gear”样式（data-icon="gear"）中，它的外观是一个图标，它位于工具栏的右边。在这个框架中，有一套预置的图标。在这篇文档中，你可以看到一些例子（请点击查阅）。
最后，主页如下所示：
<div data-role="page" id="main_page" data-theme="b">
<div data-role="header" >
<h1 id="twi_acc">Home page</h1>
<a href="#settings" data-icon="gear" >Options</a>
</div>
<div data-role="content" >
<ul data-role="listview" data-inset="true" data-theme="a">
<li><a href="#twitter_page">Twitter example</a></li>
<li><a href="#map_page">Map example</a></li> <li><a href="#search">Search example</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
<div data-role="footer">
</div>
</div>
现在，让我们来创建其他的页面。我们将会把注意力集中在设置页面上。这里我们将会放置一些表单元素。在这篇文档中，你可以找到可用的表单元素的完整列表（请点击查阅）。
根据指南，你应该把所有元素都放到一个特定的div中：
<div data-role="fieldcontain">
</div>
让我们按照这条建议来行事。现在，我们把下面这些元素放在表单上。
input域：
<label for="name">My name:</label>
<input type="text" name="name" id="name" value="" />
文本域：
<label for="textarea">About myself:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
滑块，设置它的最大值，最小值和当前值：
<label for="slider">Value this site:</label>
<input type="range" name="slider" id="slider" value="0" min="-50" max="50" />
选项：
<label for="slider2">Value this site:</label>
<select name="slider2" id="slider2" data-role="slider">
<option value="off">Like</option>
<option value="on">Dislike</option>
</select>
选择器：
<select name="select-choice-1" id="select-choice-1">
<option value="standard">Tired</option>
<option value="standard">Happy</option>
<option value="standard">Sick</option>
<option value="standard">Sunny</option>
</select>
现在，我们来创建一个搜索页面。它主要由两个元素构成：input域和searchresult列表。
<div data-role="content" >
<label for="search">Search</label>
<input type="search" name="password" id="search" value="" />
<ul data-role="listview" data-inset="true" id="searchresult">
</ul>
</div>
现在，我们需要使用JavaScript，把input域绑定到keyup函数上，来填充searchresult列表。
$("#search").keyup(function(){
var res = shuffle(monthes);
var list='';
$.each(res, function(index, value) {
list+='<li role="option" tabindex="0" data-theme="a" ><div ><div >'+value+'</div><span ></span></div></li>';
});
$("#searchresult").html(list);
});
关于这段代码，有几点需要说明一下。在第一行中，我们对现有的数组进行了“shuffle”。Shuffle函数如下所示：
var shuffle = function(o){ //v1.0
for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};
然后，我们创建了一个列表。我们应该用这种方式来创建它，因为列表项是动态地添加到这个列表中的，为了挂载样式和参数，一个框架不会再处理它们了。
然后，我们使用anywhere函数，创建一个支持Twitter的页面。首先，我们应该连接那些库：
<script src="http://platform.twitter.com/anywhere.js?id=key_value&v=1" type="text/javascript"></script>
为了得到相应的Key，你必须在这个页面中注册一下（请点击查阅）。
然后，我们创建这个页面的代码：
<div data-role="page" id="twitter_page" data-theme="b">
<div data-role="header" >
<h1>Simple twitter example</h1>
</div>
<div data-role="content" >
<div id="twi_list"></div>
</div>
<div data-role="footer">
</div>
</div>
现在是最主要的东西了——JavaScript代码，当我们打开这个页面的时候，这些代码将会执行。要追踪这个事件，可以使用一个专门的事件——pageshow。关于其他的事件，具体可以参考（请点击查阅）。
$('#twitter_page').live('pageshow',function(event, ui){
twttr.anywhere(function(T) {
T.User.find('andrebrov').timeline().first(20).each(function(status) {
$('div#twi_list').append('<p>' + status.user.name + ': ' + status.text + '</p>');
});
});
});
关于anywhere函数的使用方法，具体可以参考（请点击查阅）。当我们打开我们刚刚创建好的这个页面的时候，我们会发现，有一段时间，它一直是空白的，这是因为tweets正在载入。为了让用户知道这是怎么回事，我们将会添加一个spinner。代码如下所示：
$('#twitter_page').live('pageshow',function(event, ui){
twttr.anywhere(function(T) {
$.mobile.pageLoading();
var j=0;
T.User.find('andrebrov').timeline().first(20).each(function(status) {
$('div#twi_list').append('<p>' + status.user.name + ': ' + status.text + '</p>');
j++;
if (j==1){
$.mobile.pageLoading(true);
}
});
});
});
在这篇文档中，你可以找到关于spinner，及其实用程序的详细信息（请点击查阅）。
现在，我们来创建地图页面。首先，选择合适的脚本
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
然后，我们创建这个页面
<div data-role="page" id="map_page" data-theme="b">
<div data-role="header" >
<h1>Map example</h1>
</div>
<div data-role="content" >
<div id="map_canvas"></div>
</div>
<div data-role="footer">
</div>
</div>
“map_canvas”元素将会包含这个地图。让我们来定义它的样式：
#map_canvas{
width:100%;
height: 100%;
position:relative;
top:0px;
}
现在，我们添加一段JavaScript代码，这段代码可以确定当前的位置，把这个位置显示在地图的中央，然后给这个位置添加一个标记。此外，在这个标记上，我们还可以某个把某个事件绑定在它的点击操作上。
$('#map_page').live('pageshow',function(event, ui){
navigator.geolocation.getCurrentPosition(function(location) {
var point = new google.maps.LatLng(location.coords.latitude, location.coords.longitude);
var myOptions = {
zoom: 13,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementByIdx_x("map_canvas"),myOptions);
var marker = new google.maps.Marker({position: point,map: map});
google.maps.event.addListener(marker, 'click', function() {
alert("Current coodinates are: latitude "+location.coords.latitude+", longitude "+location.coords.longitude);
});
});
});
最后，对于我来说，这个页面中最有趣的元素是：
完整的list-divider：
<li data-role="list-divider" role="heading" tabindex="0" ></li>
打开一个邮件客户端的链接：
<li><a href="mailto:mailme@gmail.com" >EMail me</a></li>
指向电话号码的链接：
<li><a href="tel:+79000000000" >Call me</a></li>
关于各种链接，具体可以参考这里！
总结
jQuery Mobile项目宣布其要成为“完整的，统一的，移动UI架构”，jQuery Mobile核心项目也将继续为移动提供优化！
原文名称：How to write a simple application on jQuery Mobile
查看原文
PNG文件格式分为PNG-24和PNG-8，其最大的区别是PNG-24是用24位来保存一个像素值，是真彩色，而PNG-8是用8位索引值来在调色盘 中索引一个颜色，因为一个索引值的最大上限为2的8次方既128，故调色盘中颜色数最多为128种，所以该文件格式又被叫做PNG-8 128仿色。PNG-24因为其图片容量过大，而且在Nokia和Moto等某些机型上创建图片失败和显示不正确等异常时有发生，有时还会严重拖慢显示速度，故并不常 用，CoCoMo认为这些异常和平台底层的图像解压不无关系。不过该格式最大的优点是可以保存Alpha通道，同事也曾有过利用该图片格式实现Alpha 混合的先例，想来随着技术的发展，手机硬件平台的提升，Alpha混合一定会被广泛的应用，到那时该格式的最大优势才会真正发挥。
8 bit PNGs use an indexed color palette like GIF. If you want variable transparency, use 32bit PNGs (24 bit color, 8 bit alpha). If you don't care about transparency, use 24 bit PNGs.
PNG-8文件是目前广泛应用的PNG图像格式，其主要有六大块组成：
1.PNG文件标志，为固定的64个字节：0x89504e47 0x0d0a1a0a
2.文件头数据块IHDR(header chunk)
3.调色板数据块PLTE(palette chunk)
4.sBIT,tRNS块 等。。。
5.图像数据块IDAT(image data chunk)
6.图像结束数据IEND(image trailer chunk)，固定的96个字节：0x00000000 0x49454e44 0xae426082
这六大块按顺序排列，也就是说IDAT块永远是在PLTE块之后，期间也会有许多其他的区块用来描述信息，例如图像的最后修改时间是多少，图像的创建者是谁等，不过这些区块的信息对我们来说都是可有可无的描述信息，故压缩时一般先向这些区块开刀。
数据块1-4：
除了PNG文件标志，其中四大数据块和文件尾都是由统一的数据块文件结构描述的：
Chunk Length: 4byte
Chunk Type: 4byte
Chunk Data: Chunk Length的长度
Chunk CRC: 4byte
例如IHDR块的数据长度为13，既
Chunk Length = 13
Chunk Type = "IHDR"
IHDR块：
用来描述图像的基本信息，其格式为：
图像宽： 4byte
图像高： 4byte
图像色深： 4byte
颜色类型： 1byte
压缩方法： 1byte
滤波方法： 1byte
扫描方法： 1byte
曾经有人问过我，撒叫滤波方法和扫描方法，汗，说实话我也不知道，不过我们是在做手机游戏，不是在搞图形学不是嘛。
PLTE块：
这个就是传说中放置调色盘数据的地方啦，其格式为：
循环
RED： 1byte
GREEN：1byte
BLUE： 1byte
END
循环长度嘛，不就是Chunk Length / 3的长度嘛，而且Chunk Length一定为3的倍数。
tRNS块：
这个块时有时无，主要是看你是否使用了透明色。该区块的格式为：
循环
if(对应调色盘颜色非透明)
0xFF： 1byte
else
0x00： 1byte
END
循环长度为调色盘的颜色数，相当于调色盘颜色表的一个对应表，标识该颜色是否透明，0xFF不透明，0x00透明。故如果用UltraEdit查看PNG文件的二进制编码，如果看到一大片FF，一般就是tRNS区块啦，因为一个PNG文件一般只有一个透明色。
IDAT块： 这个就是存放图像数据的地方啦，这里要注意的是一个PNG文件可能有多个IDAT区块，而其他三大区块只可能有一个。 IDAT 区块是经过压缩的，所以数据不可读 ，压缩算法一般为LZ77滑动窗口算法，如果硬要看里面的数据的话，用zlib库也是可以的，CoCoMo当年就见过 Windows Mobile上的帝国时代巨变态的用zlib库压缩和解压该区块来进一步减少PNG文件大小，真是寸K寸金啊。
IEND块：
该区块虽然也按照数据块的结构，但Chunk Data是没有的，所以是固定的96个字节：0x00000000 0x49454e44 0xae426082
IEND数据块的长度总是0（00 00 00 00，除非人为加入信息），数据标识总是IEND（49 45 4E 44），因此，CRC码也总是AE 42 60 82。
PNG图像压缩：
了解了PNG的文件结构，压缩就有的放矢了。压缩有6个级别，可以根据需要选择。
Level1：读取PNG文件，将除六大块之外的所有区块都过滤掉
Level2：文件头是固定的0x89504e47 0x0d0a1a0a，文件尾是固定的0x00000000 0x49454e44 0xae426082，去掉！
Level3：每个区块的Chunk Type我们是否需要呢？很明显，我们自己写的压缩格式自己应该清楚是按照什么样的顺序，去掉！
Level4：每个区块的Chunk Length我们是否需要呢？
IHDR块：定长13个字节，明显不需要，去掉。
PLTE块：最多128个颜色，为撒要用4byte来记录区块长度而不是用1byte来记录颜色数呢？
tRNS块：既然有颜色数，tRNS又是调色盘颜色表的对应表，既数量与颜色数相同，为撒还需要呢？
IDAT块：我想这个是唯一需要4byte来记录长度的区块。
Level5：每个区块的Chunk CRC是否需要呢？
因为计算CRC需要一些时间，但对于字节较少的区块一般可以忽略不计，所以对于这个问题还是由程序员自己决定吧。对于CRC的计算可以参看CoCoMo的另一篇Blog“PNG文件的CRC码计算”
Level6：每个区块我们是否要原封不动的保存期数据呢？
IHDR块：除了宽、高、色深是需要的，后面那4byte的信息是固定的0x03000000
PLTE块：为撒要用3byte来表示RGB而不是2byte的565格式？压缩方法可以参看CoCoMo的另一篇Blog“关于PNG图像压缩的一点感悟”
tRNS块：我想tRNS块是冗余最多的区块了吧，大段大段的0xFF明显没有必要，一般的PNG文件只有一个透明色，为撒要用对应表的方法而不是一个索 引来记录到底哪个是透明色呢？由于颜色数最多128，所以只需1byte就可以代替tRNS那么多0xFF啦。
IDAT块：么想法，如果你够变态，把zlib加进来吧！
PNG图像解压：
创建了自定义的文件，J2ME端读取后，就面临解压的问题了。我们可以利用此函数来创建Image：
static Image
createImage(byte[] imageData, int imageOffset, int imageLength)
前提是传入的imageData与PNG未被压缩前的一致。因为PNG文件格式是固定的，所以读取自定义的压缩文件后，开始将那些默认的数据再添加进去，实现解压的目的。下面就开始解压之旅吧!
首先要创建一个ByteArrayOutputStream out，
1.写入文件头：
out.writeInt(0x89504e47);
out.writeInt(0x0d0a1a0a);
2.写入IHDR块
out.writeInt(13);
out.writeInt(0x49484452); //0x49484452为Chunk Type "IHDR"
out.writeInt(width);
out.writeInt(height);
out.writeByte(depth);
out.writeInt(0x03000000); //压缩时舍掉的4byte，默认0x03000000
out.writeInt(crc);
其他区块方法一致，故略过。。。
3.写入文件尾
out.writeInt(0x00000000);
out.writeInt(0x49454e44);
out.writeInt(0xae426082);
4.转换成数组，创建Image
byte[] pngBuffer = out.toByteArray();
Image image = Image.createImage(pngBuffer, 0, pngBuffer.length);
哈哈，大功告成。这里注意如果中途数据写入有错误，经常会出现创建Image失败的异常，而且非常不好调试，不过只要自定的压缩格式定下来后，对应的创建Image的函数只要写一次，以后基本不会出问题哈。
PNG图像加解密：
很多人都担心自己辛苦创作的漂亮的美术图片很easy就被别人拿到了，究其原因是由于PNG文件格式是固定的，稍微了解的人用UltraEdit很容易就 能找到IHDR，PLTE等标识了。CoCoMo就经常看GameLoft的图像文件，哈哈。一般是2byte的Length，然后紧接着图片数据，都放 在一个文件里，直接拷贝2进制然后粘贴到一个新文件里就是一幅图。后来的加密技术会把PNG分块，例如前100个字节一块，紧接着1K一块，最后剩余字节 一块，然后把块顺序打乱，用2byte来记录总长度，1byte记录顺序，但是这并没有从根本上消除IHDR，IEND这些显眼的定位标识，好像在对破解 者说：嘿，看，我就在这里！
现在了解了之前的压缩和解压技术，这个问题也就迎刃而解了，因为Chunk Length，Chunk Type和Chunk CRC这些东西都消失了，甚至连数据块本身的数据都修改了，我可以按照ImageWidth、ImageHeight、ImageDepth的顺序写数 据，也可以倒过来写。我想再牛的PNG分析器也是无能为力的吧，唯一可以定位的就只有IDAT区块了，不过就算得到该区块的数据，也应该是一张黑白图。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
附录
PNG文件结构分析(上：了解PNG文件存储格式)
PNG的文件结构
对于一个PNG文件来说，其文件头总是由位固定的字节来描述的：
十进制数 137 80 78 71 13 10 26 10 十六进制数 89 50 4E 47 0D 0A 1A 0A
其中第一个字节0x89超出了ASCII字符的范围，这是为了避免某些软件将PNG文件当做文本文件来处理。文件中剩余的部分由3个以上的PNG的数据块（Chunk）按照特定的顺序组成，因此，一个标准的PNG文件结构应该如下：
PNG文件标志 PNG数据块 …… PNG数据块
PNG数据块（Chunk）
PNG定义了两种类型的数据块，一种是称为关键数据块(critical chunk)，这是标准的数据块，另一种叫做辅助数据块(ancillary chunks)，这是可选的数据块。关键数据块定义了4个标准数据块，每个PNG文件都必须包含它们，PNG读写软件也都必须要支持这些数据块。虽然 PNG文件规范没有要求PNG编译码器对可选数据块进行编码和译码，但规范提倡支持可选数据块。
下表就是PNG中数据块的类别，其中，关键数据块部分我们使用深色背景加以区分。
为了简单起见，我们假设在我们使用的PNG文件中，这4个数据块按以上先后顺序进行存储，并且都只出现一次。
数据块结构
PNG文件中，每个数据块由4个部分组成，如下：
名称 字节数 说明 Length (长度) 4字节 指定数据块中数据域的长度，其长度不超过(231 －1)字节 Chunk Type Code (数据块类型码) 4字节 数据块类型码由ASCII字母(A-Z和a-z)组成 Chunk Data (数据块数据) 可变长度 存储按照Chunk Type Code指定的数据 CRC (循环冗余检测) 4字节 存储用来检测是否有错误的循环冗余码
CRC(cyclic redundancy check)域中的值是对Chunk Type Code域和Chunk Data域中的数据进行计算得到的。CRC具体算法定义在ISO 3309和ITU-T V.42中，其值按下面的CRC码生成多项式进行计算：
x32 +x26 +x23 +x22 +x16 +x12 +x11 +x10 +x8 +x7 +x5 +x4 +x2 +x+1
下面，我们依次来了解一下各个关键数据块的结构吧。
IHDR
文件头数据块IHDR(header chunk)：它包含有PNG文件中存储的图像数据的基本信息，并要作为第一个数据块出现在PNG数据流中，而且一个PNG数据流中只能有一个文件头数据块。
文件头数据块由13字节组成，它的格式如下表所示。
索引彩色图像：1，2，4或8
灰度图像：1，2，4，8或16
真彩色图像：8或16 ColorType 1 byte 颜色类型：
0：灰度图像, 1，2，4，8或16
2：真彩色图像，8或16
3：索引彩色图像，1，2，4或8
4：带α通道数据的灰度图像，8或16
6：带α通道数据的真彩色图像，8或16 Compression method 1 byte 压缩方法(LZ77派生算法) Filter method 1 byte 滤波器方法 Interlace method 1 byte 隔行扫描方法：
0：非隔行扫描
1： Adam7(由Adam M. Costello开发的7遍隔行扫描方法)
由于我们研究的是手机上的PNG，因此，首先我们看看MIDP1.0对所使用PNG图片的要求吧：
- 在MIDP1.0中，我们只可以使用1.0版本的PNG图片。并且，所以的PNG关键数据块都有特别要求：
IHDR - 文件大小：MIDP支持任意大小的PNG图片，然而，实际上，如果一个图片过大，会由于内存耗尽而无法读取。
- 颜色类型：所有颜色类型都有被支持，虽然这些颜色的显示依赖于实际设备的显示能力。同时，MIDP也能支持alpha通道，但是，所有的alpha通道信息都会被忽略并且当作不透明的颜色对待。
- 色深：所有的色深都能被支持。
- 压缩方法：仅支持压缩方式0（deflate压缩方式），这和jar文件的压缩方式完全相同，所以，PNG图片数据的解压和jar文件的解压可以使用相同的代码。（其实这也就是为什么J2ME能很好的支持PNG图像的原因：））
- 滤波器方法：尽管在PNG的白皮书中仅定义了方法0，然而所有的5种方法都被支持！
- 隔行扫描：虽然MIDP支持0、1两种方式，然而，当使用隔行扫描时，MIDP却不会真正的使用隔行扫描方式来显示。
- PLTE chunk：支持
- IDAT chunk：图像信息必须使用5种过滤方式中的方式0 (None, Sub, Up, Average, Paeth)
- IEND chunk：当IEND数据块被找到时，这个PNG图像才认为是合法的PNG图像。
- 可选数据块：MIDP可以支持下列辅助数据块，然而，这却不是必须的。
bKGD cHRM gAMA hIST iCCP iTXt pHYs
sBIT sPLT sRGB tEXt tIME tRNS zTXt
关于更多的信息，可以参考http://www.w3.org/TR/REC-png.html
PLTE
调色板数据块PLTE(palette chunk)包含有与索引彩色图像(indexed-color image)相关的彩色变换数据，它仅与索引彩色图像有关，而且要放在图像数据块(image data chunk)之前。
PLTE数据块是定义图像的调色板信息，PLTE可以包含1~256个调色板信息，每一个调色板信息由3个字节组成：
颜色
字节
意义
Red
1 byte
0 = 黑色, 255 = 红
Green
1 byte
0 = 黑色, 255 = 绿色
Blue
1 byte
0 = 黑色, 255 = 蓝色
因此，调色板的长度应该是3的倍数，否则，这将是一个非法的调色板。
对于索引图像，调色板信息是必须的，调色板的颜色索引从0开始编号，然后是1、2……，调色板的颜色数不能超过色深中规定的颜色数（如图像色深为4的时候，调色板中的颜色数不可以超过2^4=16），否则，这将导致PNG图像不合法。
真彩色图像和带α通道数据的真彩色图像也可以有调色板数据块，目的是便于非真彩色显示程序用它来量化图像数据，从而显示该图像。
IDAT
图像数据块IDAT(image data chunk)：它存储实际的数据，在数据流中可包含多个连续顺序的图像数据块。
IDAT存放着图像真正的数据信息，因此，如果能够了解IDAT的结构，我们就可以很方便的生成PNG图像。
IEND
图像结束数据IEND(image trailer chunk)：它用来标记PNG文件或者数据流已经结束，并且必须要放在文件的尾部。
如果我们仔细观察PNG文件，我们会发现，文件的结尾12个字符看起来总应该是这样的：
00 00 00 00 49 45 4E 44 AE 42 60 82
不难明白，由于数据块结构的定义，IEND数据块的长度总是0（00 00 00 00，除非人为加入信息），数据标识总是IEND（49 45 4E 44），因此，CRC码也总是AE 42 60 82。
实例研究PNG
以下是由Fireworks生成的一幅图像，图像大小为8*8， 为了方便大家观看，我们将图像放大：
使用UltraEdit32打开该文件，如下：
00000000~00000007：
可以看到，选中的头8个字节即为PNG文件的标识。
接下来的地方就是IHDR数据块了：
00000008~00000020：
- 00 00 00 0D 说明IHDR头块长为13
- 49 48 44 52 IHDR标识
- 00 00 00 08 图像的宽，8像素
- 00 00 00 08 图像的高，8像素
- 04 色深，2^4=16，即这是一个16色的图像（也有可能颜色数不超过16，当然，如果颜色数不超过8，用03表示更合适）
- 03 颜色类型，索引图像
- 00 PNG Spec规定此处总为0（非0值为将来使用更好的压缩方法预留），表示使压缩方法(LZ77派生算法)
- 00 同上
- 00 非隔行扫描
- 36 21 A3 B8 CRC校验
00000021~0000002F：
可选数据块sBIT，颜色采样率，RGB都是256（2^8=256）
00000030~00000062：
这里是调色板信息
- 00 00 00 27 说明调色板数据长为39字节，既13个颜色数
- 50 4C 54 45 PLTE标识
- FF FF 00 颜色0
- FF ED 00 颜色1
- …… ……
- 09 00 B2 最后一个颜色，12
- 5F F5 BB DD CRC校验
00000063~000000C5：
这部分包含了pHYs、tExt两种类型的数据块共3块，由于并不太重要，因此也不再详细描述了。
000000C0~000000F8：
以上选中部分是IDAT数据块
- 00 00 00 27 数据长为39字节
- 49 44 41 54 IDAT标识
- 78 9C…… 压缩的数据，LZ77派生压缩方法
- DA 12 06 A5 CRC校验
IDAT中压缩数据部分在后面会有详细的介绍。
000000F9~00000104：
IEND数据块，这部分正如上所说，通常都应该是 00 00 00 00 49 45 4E 44 AE 42 60 82
至此，我们已经能够从一个PNG文件中识别出各个数据块了。由于PNG中规定除关键数据块外，其它的辅助数据块都为可选部分，因此，有了这个标准后，我们可以通过删除所有的辅助数据块来减少PNG文件的大小。（当然，需要注意的是，PNG格式可以保存图像中的层、文字等信息，一旦删除了这些辅助数据块后，图像将失去原来的可编辑性。）
删除了辅助数据块后的PNG文件，现在文件大小为147字节，原文件大小为261字节，文件大小减少后，并不影响图像的内容。
其实，我们可以通过改变调色板的色值来完成一些又趣的事情，比如说实现云彩/水波的流动效果，实现图像的淡入淡出效果等等，在此，给出一个链接给大家看也许更直接：http://blog.csdn.net/flyingghost/archive/2005/01/13/251110.aspx ，我写此文也就是受此文的启发的。
如上说过，IDAT数据块是使用了LZ77压缩算法生成的，由于受限于手机处理器的能力，因此，如果我们在生成IDAT数据块时仍然使用LZ77压缩算法，将会使效率大打折扣，因此，为了效率，只能使用无压缩的LZ77算法，关于LZ77算法的具体实现，此文不打算深究，如果你对LZ77算法的JAVA实现有兴趣，可以参考以下两个站点：
- http://jazzlib.sourceforge.net/
- http://www.jcraft.com/jzlib/index.html
PNG文件结构分析(下：在手机上生成PNG文件)
上面我们已经对PNG的存储格式有了了解，因此，生成PNG图片只需要按照以上的数据块写入文件即可。
(由于IHDR、PLTE的结构都非常简单，因此，这里我们只是重点讲一讲IDAT的生成方法，IHDR和PLTE的数据内容都沿用以上的数据内容)
问题确实是这样的，我们知道，对于大多数的图形文件来说，我们都可以将实际的图像内容映射为一个二维的颜色数组，对于上面的PNG文件，由于它用的是16色的调色板（实际是13色），因此，对于图片的映射可以如下：
(调色板对照图)
12 11 10 9 8 7 6 5 11 10 9 8 7 6 5 4 10 9 8 7 6 5 4 3 9 8 7 6 5 4 3 2 8 7 6 5 4 3 2 1 7 6 5 4 3 2 1 0 6 5 4 3 2 1 0 0 5 4 3 2 1 0 0 0
PNG Spec中指出，如果PNG文件不是采用隔行扫描方法存储的话，那么，数据是按照行(ScanLine)来存储的，为了区分第一行，PNG规定在每一行的前面加上0以示区分，因此，上面的图像映射应该如下：
0 12 11 10 9 8 7 6 5 0 11 10 9 8 7 6 5 4 0 10 9 8 7 6 5 4 3 0 9 8 7 6 5 4 3 2 0 8 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 0 6 5 4 3 2 1 0 0 0 5 4 3 2 1 0 0 0
另外，需要注意的是，由于PNG在存储图像时为了节省空间，因此每一行是按照位(Bit)来存储的，而并不是我们想象的字节（Byte），如果你没有忘记的话，我们的IHDR数据块中的色深就指明了这一点，所以，为了凑成PNG所需要的IDAT，我们的数据得改成如下：
0 203 169 135 101 0 186 152 118 84 0 169 135 101 67 0 152 118 84 50 0 135 101 67 33 0 118 84 50 16 0 101 67 33 0 0 84 50 16 0
最后，我们对这些数据进行LZ77压缩就可以得到IDAT的正确内容了。
然而，事情并不是这么简单，因为我们研究的是手机上的PNG，如果需要在手机上完成LZ77压缩工作，消耗的时间是可想而知的，因此，我们得再想办法加减少压缩时消耗的时间。好在LZ77也提供了无压缩的压缩方法（奇怪吧？），因此，我们只需要简单的使用无压缩的方式写入数据就可以了，这样虽然浪费了空间，却换回了时间！
好了，让我们看一看怎么样凑成无压缩的LZ77压缩块：
其中的LEN是指数据的长度，占用两个字节，对于我们的图像来说，第一个Scan Line包含了5个字节（如第一行的0, 203, 169, 135, 101），所以LEN的值为5（字节/行） * 8（行） = 40（字节），生成字节为28 00（低字节在前），NLEN是LEN的补码，即NLEN = LEN ^ 0xFFFF，所以NLEN的为 D7 FF，Adler32信息为24 A7 0B A4（具体算法见源程序），因此，按照这样的顺序，我们生成IDAT数据块，最后，我们将IHDR、PLTE、IDAT和IEND数据块写入文件中，就可以得到PNG文件了，如图：
至此，我们已经能够采用最快的时间将数组转换为PNG图片了
参考资料：
PNG文件格式白皮书：http://www.w3.org/TR/REC-png.html
为数不多的中文PNG格式说明：http://dev.gameres.com/Program/Visual/Other/PNGFormat.htm
RFC-1950(ZLIB Compressed Data Format Specification)：ftp://ds.internic.net/rfc/rfc1950.txt
RFC-1950(DEFLATE Compressed Data Format Specification)：ftp://ds.internic.net/rfc/rfc1951.txt
LZ77算法的JAVA实现：http://jazzlib.sourceforge.net/
LZ77算法的JAVA实现，包括J2ME版本：http://www.jcraft.com/jzlib/index.html