我想了解位图、像素等相关基础知识

Posted 2023-03-30

请各位提供一些好的文档供学习，谢谢！

参考技术A 位图图像

位图图像是用每一个栅格内不同颜色的点来描述图像属性的，这些点就是我们常说的像素。就拿前面的椭圆来说吧，也可以由所有组成该椭圆的像素的位置和颜色来描述。因为编辑位图时，修改的是像素，而不是直线和曲线。因此无法通过修改描述椭圆轮廓的直线或曲线来更改椭圆的性质。

位图图像的分辨率不是独立的，因为描述图像的数据是对特定大小栅格中图像而言的，因此，编辑位图会改变它的显示质量，尤其是放缩图像，会因为图像在栅格内的重新分配而导致图像边缘粗糙。在比位图图像本身的分辨率低的输出设备上显示图像也会降低图像的显示质量。
=================================

像素，就是图像最基本的单位（Pixel），最简单的示范，就是利用图像编辑软件，将图像放大至无法分割的图像单位。

单一像素长与宽的比例不见得是正方形（1：1），依照不同的系统尚有“1.45：1”以及“0.97：1”的比例，每一个像素都有一个对应的色板。

1bit＝2色
7bit＝128色

4bit＝16色
8bit＝256色

5bit＝32色
16bit＝32768色

6bit＝64色
24bit＝16777216色

也就是说，越高位的像素，其拥有的色板也就越丰富，越能表达颜色的真实感。 参考技术B 一、BMP文件组成
BMP文件由文件头、位图信息头、颜色信息和图形数据四部分组成。
1、 BMP文件头：BMP文件头数据结构含有BMP文件的类型、文件大小和位图起始位置等信息。
typedef struct tagBITMAPFILEHEADER
WORD bfType; // 位图文件的类型，必须为BM
DWORD bfSize; // 位图文件的大小，以字节为单位
WORD bfReserved1; // 位图文件保留字，必须为0
WORD bfReserved2; // 位图文件保留字，必须为0
DWORD bfOffBits; // 位图数据的起始位置，以相对于位图文件头的偏移量表示，以字节为单位
BITMAPFILEHEADER;
2、 位图信息头：BMP位图信息头数据用于说明位图的尺寸等信息。
typedef struct tagBITMAPINFOHEADER
DWORD biSize; // 本结构所占用字节数
LONGbiWidth; // 位图的宽度，以像素为单位
LONGbiHeight; // 位图的高度，以像素为单位
WORD biPlanes; // 目标设备的级别，必须为1
WORD biBitCount// 每个像素所需的位数，必须是1(双色),4(16色)，8(256色)或24(真彩色)之一
DWORD biCompression; // 位图压缩类型，必须是 0(不压缩),1(BI_RLE8压缩类型)或2(BI_RLE4压缩类型)之一
DWORD biSizeImage; // 位图的大小，以字节为单位
LONG biXPelsPerMeter; // 位图水平分辨率，每米像素数
LONG biYPelsPerMeter; // 位图垂直分辨率，每米像素数
DWORD biClrUsed;// 位图实际使用的颜色表中的颜色数
DWORD biClrImportant;// 位图显示过程中重要的颜色数
BITMAPINFOHEADER;
3、 颜色表：颜色表用于说明位图中的颜色，它有若干个表项，每一个表项是一个RGBQUAD类型的结构，定义一种颜色。
typedef struct tagRGBQUAD
BYTE rgbBlue;// 蓝色的亮度(值范围为0-255)
BYTE rgbGreen; // 绿色的亮度(值范围为0-255)
BYTE rgbRed; // 红色的亮度(值范围为0-255)
BYTE rgbReserved;// 保留，必须为0
RGBQUAD;
颜色表中RGBQUAD结构数据的个数有biBitCount来确定:
当biBitCount=1,4,8时，分别有2,16,256个表项;
当biBitCount=24时，没有颜色表项。
位图信息头和颜色表组成位图信息，BITMAPINFO结构定义如下:
typedef struct tagBITMAPINFO
BITMAPINFOHEADER bmiHeader; // 位图信息头
RGBQUAD bmiColors[1]; // 颜色表
BITMAPINFO;
4、 位图数据：位图数据记录了位图的每一个像素值，记录顺序是在扫描行内是从左到右,扫描行之间是从下到上。位图的一个像素值所占的字节数:
当biBitCount=1时，8个像素占1个字节;
当biBitCount=4时，2个像素占1个字节;
当biBitCount=8时，1个像素占1个字节;
当biBitCount=24时,1个像素占3个字节;
Windows规定一个扫描行所占的字节数必须是4的倍数(即以long为单位),不足的以0填充，
一个扫描行所占的字节数计算方法:
DataSizePerLine= (biWidth* biBitCount+31)/8; // 一个扫描行所占的字节数
DataSizePerLine= DataSizePerLine/4*4; // 字节数必须是4的倍数
位图数据的大小(不压缩情况下):
DataSize= DataSizePerLine* biHeight;
二、BMP文件分析
1、 工具软件：Hex Workshop 或 UltraEdit
2、 分析：首先请注意所有的数值在存储上都是按"高位放高位、低位放低位的原则"，如12345678h放在存储器中就是7856 3412）。下图是一张图16进制数据，以此为例进行分析。在分析中为了简化叙述，以一个字（两个字节为单位，如424D就是一个字）为序号单位进行，"h"表示是16进制数。
424D 4690 0000 0000 0000 4600 0000 2800
0000 8000 0000 9000 0000 0100 1000 0300
0000 0090 0000 A00F 0000 A00F 0000 0000
0000 0000 0000 00F8 0000 E007 0000 1F00
0000 0000 0000 02F1 84F1 04F1 84F1 84F1
06F2 84F1 06F2 04F2 86F2 06F2 86F2 86F2
1：图像文件头。424Dh='BM'，表示是Windows支持的BMP格式。
2-3：整个文件大小。4690 0000，为00009046h=36934。
4-5：保留，必须设置为0。
6-7：从文件开始到位图数据之间的偏移量。4600 0000，为00000046h=70，上面的文件头就是35字=70字节。
8-9：位图图信息头长度。
10-11：位图宽度，以像素为单位。8000 0000，为00000080h=128。
12-13：位图高度，以像素为单位。9000 0000，为00000090h=144。
14：位图的位面数，该值总是1。0100，为0001h=1。
15：每个像素的位数。有1（单色），4（16色），8（256色），16（64K色，高彩色），24（16M色，真彩色），32（4096M色，增强型真彩色）。T408支持的是16位格式。1000为0010h=16。
16-17：压缩说明：有0（不压缩），1（RLE 8，8位RLE压缩），2（RLE 4，4位RLE压缩），3（Bitfields，位域存放）。RLE简单地说是采用像素数+像素值的方式进行压缩。T408采用的是位域存放方式，用两个字节表示一个像素，位域分配为r5b6g5。图中0300 0000为00000003h=3。
18-19：用字节数表示的位图数据的大小，该数必须是4的倍数，数值上等于位图宽度×位图高度×每个像素位数。0090 0000为00009000h=80×90×2h=36864。
20-21：用象素/米表示的水平分辨率。A00F 0000为0000 0FA0h=4000。
22-23：用象素/米表示的垂直分辨率。A00F 0000为0000 0FA0h=4000。
2：位图使用的颜色索引数。设为0的话，则说明使用所有调色板项。
26-27：对图象显示有重要影响的颜色索引的数目。如果是0，表示都重要。
28-35：彩色板规范。对于调色板中的每个表项，用下述方法来描述RGB的值：
1字节用于蓝色分量
1字节用于绿色分量
1字节用于红色分量
1字节用于填充符(设置为0)
对于24-位真彩色图像就不使用彩色表，因为位图中的RGB值就代表了每个象素的颜色。但是16位r5g6b5位域彩色图像需要彩色表，看前面的图，与上面的解释不太对得上，应以下面的解释为准。
图中彩色板为00F8 0000 E007 0000 1F00 0000 0000 0000，其中：
00FB 0000为FB00h=1111100000000000（二进制），是红色分量的掩码。
E007 0000为 07E0h=0000011111100000（二进制），是绿色分量的掩码。
1F00 0000为001Fh=0000000000011111（二进制），是红色分量的掩码。
0000 0000总设置为0。
将掩码跟像素值进行"与"运算再进行移位操作就可以得到各色分量值。看看掩码，就可以明白事实上在每个像素值的两个字节16位中，按从高到低取5、6、5位分别就是r、g、b分量值。取出分量值后把r、g、b值分别乘以8、4、8就可以补齐第个分量为一个字节，再把这三个字节按rgb组合，放入存储器（同样要反序），就可以转换为24位标准BMP格式了。

另外，用ultraedit可查看几乎所有文件的二进制代码，本回答被提问者采纳 参考技术C 你到中国photoshop联盟去看看吧

移动端适配深入

前言：移动端适配需要先了解很多概念

比如四个像素

物理像素

　（就是手机屏幕分辨率，设备成像的最小单元。多少乘以多少，就是有多少个物理像素）

设备独立像素

　　这个就是另外一个概念（手机页面能操作的最小单元）

　　重点：由相关系统可以转化为物理像素，同样也是设备提供的一个接口（对接css像素）

css像素

　　也是一个虚拟概念（pc端能操作的最小单元）

位图像素

　　图片的最小单元（位图像素必须1:1 才能完美显示）

---

 

另外一个重点就是视口

三个视口

前言：在pc端，视口就是浏览器的可视区域，其宽度与浏览器宽度保持一致

移动端中就比较复杂

因为：移动端的浏览器宽度通常240px-640px。而大多数为pc端设计的网站宽度至少

800px。如果仍然以浏览器窗口作为视口的话，网站的内容在手机上看起来会非常窄

字非常小。因此引进了三个视口。使得移动端中的视口与浏览器宽度不再关联