矢量图、位图、RGB、YUV、JPEG、PNG的理解

开发的项目中缺少不了图形图像的支持,对图的使用场景也是极多的,但对其内部原理却一直处理模糊状态,抽时间做个整理吧,理一下相关的概念。

一、矢量图与位图

矢量图与位图均为图像的表述方式,矢量图可以理解为在我们口中描述图形的方法,比如:图A:一个半径10cm的绿色实心圆,重点包括:圆、实心、绿色、半径为10cm、圆心位置,这些信息只需要很少的字节即可记录图A,因而,矢量图所占空间较小;还有一个特点就是放大以后不会变形,因为不管放多大,其特征都是固定的。矢量图缺点也很明显,难以表述复杂场景。基于矢量图放大不变形的特点,目前有一个重要的应用场景是电子地图。

位图的基本单元为像素,位图即是像素的集合,具体到某一张平面图片,将其量化为width*heigh的像素矩阵,每个像素使用一定的规则(RGB或YUV,稍后细述)进行表述,得到整个图片的二进制文件格式即为位图。不经过处理的位图持有原图的全部数字化信息,图片文件比矢量图要大很多。

二、RGB

位图的每个像素可以用RGB格式表述,RGB也是像素点色彩值的最直观表述,常用的RGB包括RGB565、RGB888,表示不同的量化级别,以RGB888为例,分别采用8个bit表示红色、蓝色和绿色,各色值的量化范围为[0,255],可以表述2^24个色值。一幅720*1080的图片如果用RGB888表述的话大小为:720*1080*3=2M左右,文件较大,一般都要进行压缩处理。当前大部分的压缩处理算法是不是基于RGB的,而是针对YUV的。还有一种ARGB格式,在RGB的基础上,加上了Alpha通道,可以处理图片的透明部分。

三、YUV

RGB是把图片的每一个像素值用RGB的格式进行表述,YUV是另一种表述格式,也是针对每一个像素的,提取像素的亮度(Y分量)、色差(UV分量)。RGB的存储中,每个像素的R分量G分量B分量是挨着存放的,而YUV则是分为Y块、U块、V块三个矩阵,人眼最敏感的Y块全量保留,UV分块则可进行压缩处理。YUV的格式包括:YUV444、YUV422、YUV420、YUV411,表示不同的压缩比例,YUV444为源像素值。怎么理解呢,看下述步骤:

首先,取相领的2*2的四个像素

[Y1,U1,V1][Y2,U2,V2]

[Y3,U3,V3][Y4,U4,V4]

YUV444即为上述的四个值全部保留,YUV各占1Byte,四个像素所需空间为4*3=12B

YUV422为U值两个像素取一个、V值也是两个像素取一个,结果为:

[Y1,U1,V2][Y2,U1,V2]

[Y3,U3,V4][Y4,U4,V4]

四个像素所占空间为4*2=8B

YUV411四个像素使用一个像素的UV分量,编码结果为:

[Y1,U1,V3][Y2,U1,V3]

[Y3,U1,V3][Y4,U1,V3]

所占空间为4*3/2=6Byte

YUV420并非不要V分量,而是以行为单位,一行取U值,一行取V值

扩展一下源像素,第三、四行为:

[Y5,U5,V5][Y6,U6,V6]

[Y7,U7,V7][Y8,U8,V8]

YUV420的编码结果为:

[Y1,U1,无][Y2,U1,无]

[Y3,U3,无][Y4,U3,无]

[Y5,无,V5][Y6,无,V5]

[Y7,无,V7][Y8,无,V7]

8个像素所占空间为8*3/2=12Byte,4个像素的话为6B

一幅720*1080的图片YUV420格式的大小为:720*1080*3/2=1M左右,是RGB的一半。

RGB与YUV的转换公式:

矩阵形式:

要注意的是在写代码实现上,两者的存储方式不同,RGB连在一起,YUV分块存放。

四、JPEG

JPEG是一种有损压缩格式,其压缩比可达1:100,一般在1:10左右,右侧的值越大,文件越小,但清晰度也越低,其算法 的实现原理有非常多的文章描述的很清楚了,也不是很复杂,下面是我看到的几篇比较好的,推荐给大家:

中文:

https://blog.csdn.net/newchenxf/article/details/51719597/

https://blog.csdn.net/asdzheng/article/details/51779038

英文资料中维基上的就很全:

https://en.wikipedia.org/wiki/JPEG

总体说来,先压缩UV分量,然后分别对Y、U、V块进行离散余弦变换,将变换完的矩阵使用量化矩阵(和压缩比有关系)进行量化,Z字形拉平矩阵,哈夫曼编码。

五、PNG

PNG是一种无损压缩格式,也就是说经过PNG编码后的图像解码后可以保留源文件全部信息。当然,这个只是理论的,在实际算法中,与PNG支持的色度有关,比如,PNG表示一个颜色值使用8bit,则可以表示256种颜色,也就是说编码及解码可以达到256种颜色的还原,24位的PNG和RGB的精确度是一致的。PNG算法压缩原理利用的是图像相邻的色值有大面积重复部分,比如说,拍摄的蓝天白云,其蓝天部分的色值重复率就很高。PNG算法中首先按图像从左到右、从上到下获得各像素点的色值,然后在表示色值M之前会加一个重复个数的值N,表示该M色值往后N位全就都是M色值,N最大可表示的值取决于重复个数的二进制位,比如8位,最多可表示256个重复值,超过256,即使仍然是相同颜色,也要需要新起色值表示,这样重复色块就合并成数量+色值的表示,从而达到压缩效果。图像重合块越多,PNG的压缩效果就越好。
————————————————
版权声明:本文为CSDN博主「路路人王」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/kcstrong/article/details/81705693

原文地址:https://www.cnblogs.com/feng9exe/p/12230571.html

时间: 2024-10-10 04:38:26

矢量图、位图、RGB、YUV、JPEG、PNG的理解的相关文章

Android UI:矢量图使用

一.矢量图简介最近在进行Android App"瘦身 "的时候,了解到矢量图(VectorDrawable)相关概念.从Android5.0(API level 21)开始,有两个类支持矢量图:VectorDrawable和AnimatedVectorDrawable.VectorDrawable是一个矢量图,定义在一个XML文件中的点.线和曲线,和它们相关颜色的信息集合.AnimatedVectorDrawable是矢量图动画,使用多个XML文件而不是针对不同分辨率使用多个图片来实现

ps中的位图,矢量图,颜色模式

什么是位图?什么是矢量图? 位图是由像素组成的图像,在缩放和旋转的时候容易失真,同时文件容量较大 矢量图是根据几何特性来绘制的图形,通过数学公式计算获得的,不易制作色彩变化太多的图象 颜色模式 RGB模式.CMYK模式.HSB模式.Lab颜色模式.位图模式.灰度模式 1:RGB模式 是Photoshop中最常用的模式,也被称之为真彩色模式,主要是由R(红).G(绿).B(蓝)3种基本色相加进行配色,并组成了红.绿.蓝3种颜色通道,每个颜色通道包含了8位颜色信息,每一个信息是用0~255的亮度值来

位图与矢量图

矢量图形 是用一系列计算机指令来描述和记录一幅图的内容,即通过指令描述构成一幅图的所有直线.曲线.圆.圆弧.矩形等图元的位置.维数和形状,也可以用更为复杂的形式表示图像中曲面.光照和材质等效果. 矢量图法实质上是用数学的方式(算法和特征)来描述一幅图形图像,在处理图形图像时根据图元对应的数学表达式进行编辑和处理. 在屏幕上显示一幅图形图像时,首先要解释这些指令,然后将描述图形图像的指令转换成屏幕上显示的形状和颜色.编辑矢量图的软件通常称为绘图软件,如适于绘制机械图.电路图的AutoCAD软件等.

Android使用SVG矢量图打造酷炫动效!

尊重原创,欢迎转载,转载请注明: FROM  GA_studio   http://blog.csdn.net/tianjian4592 一个真正酷炫的动效往往让人虎躯一震,话不多说,咱们先瞅瞅效果: 这个效果我们需要考虑以下几个问题: 1. 这是图片还是文字: 2. 如果是图片该如何拿到图形的边沿线坐标,如果是文字呢? 3. 如果拿到了边沿线坐标,如何让光线沿着路径跑动: 4. 怎么处理过程的衔接: 以上四个问题似乎不是太好处理,而这几个问题也正好是这个效果精华所在,接下来咱们一个一个进行考虑

MATLAB GUI 程序设计中将axes保存为矢量图的方法

MATLAB进行GUI程序设计时,一个figure中通常包含多个axes控件. 保存矢量图的常用指令saveas和print只能以figure为单位保存图片,而不能将figure中的某一个axes单独保存. 而getframe+imwrite的方法虽然可以保存axes,但只能保存为位图,不能保存为矢量图,必定造成图像细节信息丢失. 下面给出一种解决方案. 创建一个新的.不可见的figure和axes,将要保存的axes内容复制至新的axes中,并保存新的figure. 由于新的figure中只有

protel DXP的类矢量图功能

一.概述 在写论文的过程中,我们经常需要将protel DXP上的原理图贴入到WORD中.我们可以选择使用截图工具,然后再导入到WORD中.但是由于普通截图图形文件都是位图文件,当我们将图形文件导入WORD后,通常需要调整大小,结果就使得文件中的图形变得模糊.当把论文打印出来,效果也非常差. 其实Proteus是具有将原理图转换为"矢量图EMF文件"的功能,但是protel DXP却没有这个功能,有没有好的办法使得protel DXP也具有生成矢量图的功能呢?这就是本文要解决的问题.

VG.net矢量图和矢量动画开发平台拓扑图软件免费下载

VG.net拓扑图软件是一个基于.net平台的矢量图开发工具,可广泛应用于包括:电力.军工.煤炭.化工.科研.能源等各种监控软件.工作流设计器.电力.化工.煤炭.工控组态软件.仿真.地理信息系统.工作流.复杂报表 工业SCADA系统.ERP流程设计系统.图形管理.图形拓扑分析.GIS地理信息系统系统.工程制图等领域. VG.net 设计器是一个在Visual Studio .NET集成的图形编辑器.用户无需编写代码即可设计制图. 制图对象包括: 矩形,圆角矩形,椭圆形,弧形,扇形,多边形,折线,

RGB/YUV/YCbCr--关于显示,颜色你需要了解的一些事

本文来自:我爱研发网(52RD.com) - R&D大本营 详细出处:http://www.52rd.com/Blog/Detail_RD.Blog_SHRDFresh_64107.html 工作中常听说RGB/YUV/YCbCr 这样一些名词,概念上似乎很混淆?这里是一个简介,部分内容来自wiki,理解不对的地方欢迎指正. A:首先两个基本概念: Color model和Color Space. 1. Color Model: 为了表达人眼观察到的颜色,人们从数学模型上定义了一系列不同的col

最简单的视音频播放演示样例7:SDL2播放RGB/YUV

===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频播放演示样例2:GDI播放YUV, RGB 最简单的视音频播放演示样例3:Direct3D播放YUV,RGB(通过Surface) 最简单的视音频播放演示样例4:Direct3D播放RGB(通过Texture) 最简单的视音频播放演示样例5:OpenGL播放RGB/YUV 最简单的视音频播放演示样例