一直在想，应该要用什么方式去写前端开发中图片的故事，按照图片类型枚举太散乱，还是从编码开始说起吧。
数据格式
图片数据格式由图片头部和图片内容组成，图片头部则是描述图片信息的数据，比如图片的大小、格式之类的。所以图片是不用等到全部都加载完才能知道宽度和高度的。
另外对于数码相机拍摄的照片，会有exif信息，包括拍摄设备型号、照片方向、图象拍摄时间等。那么获取照片方向什么的，可以使用exif-js，详情可以参照| 名称 | 说明 |
|---|---|
| EXIF.getData(img, callback) | 获取图像的数据，能兼容尚未支持提供 EXIF 数据的浏览器获取到元数据。 |
| EXIF.getTag(img, tag) | 获取图像的某个数据 |
| EXIF.getAllTags(img) | 获取图像的全部数据，值以对象的方式返回 |
| EXIF.pretty(img) | 获取图像的全部数据，值以字符串的方式返回 |
图片格式
| 名称 | 说明 |
|---|---|
| gif | 无损压缩格式，压缩率一般在50%左右，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。支持透明背景图像。GIF是一种比较好用的动画格式，但是会有白色锯齿，可以选择在Photoshop上更改杂边背景色与H5图层背景色融合在一起淡化这种不良反应。再推荐一个Flash、视频等格式转化为GIF动画的 |
| jpeg / jpg | JPEG，全称为“Joint Photographic Experts Group”，是一种针对图像的压缩而制定的标准，体积相对较小，打开速度较快，但是图片相对没有那么清晰。使用JPEG标准压缩的图片文件，被称为“JPEG文件”，这种文件的扩展名通常是JPG、JPEG、JPE、JFIF以及JIF，在这些文件格式中，以JPG的使用最为广泛。JPEG在压缩图像时所进行的色彩空间转换，指的就是将RGB转换为YCbCr。压缩相关，可以参照 |
| png | 便携式网络图形是一种无损压缩的位图片形格式，格式有8位、24位、32位三种形式，其中8位PNG支持两种不同的透明形式（索引透明和alpha透明），24位PNG不支持透明，32位PNG在24位基础上增加了8位透明通道，因此可展现256级透明程度。PNG规范中不包含嵌入式EXIF（可交换图像文件格式）图像数据的标准 |
| apng | 是一个基于PNG（Portable Network Graphics）的位图动画格式，不识别APNG格式的PNG解码器至少能够正常回放第一幅普通PNG画面。支持ios 8，不支持安卓 |
| webp | 谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。WebP既支持有损压缩也支持无损压缩。相较编码JPEG文件，编码同样质量的WebP文件需要占用更多的计算资源。Android 4.0+，IOS不支持 |
图片的渲染
图片的渲染有两种方式，一个是自上而下的渲染，一个是渐进式渲染，区别在于保存时在photoshop勾选的连续选项。
若是连续则是渐进式渲染，一种类似于淡入的效果，否则是自上而下的渲染，有一种图片撑开页面的过程。获取图片数据
-
canvas 获取
cxt.getImageData复制代码