精华内容
下载资源
问答
  • 什么是物理像素、虚拟像素、逻辑像素、设备像素什么又是 PPI, DPI, DPR DIP?有关 viewport 以及苹果安卓设备上的页面呈现为什么效果不一样,又有哪些方法去改变统一呢?网络上有很多资源对这些知识点进行了...

    什么是物理像素、虚拟像素、逻辑像素、设备像素,什么又是 PPI, DPI, DPR 和 DIP?有关 viewport 以及苹果安卓设备上的页面呈现为什么效果不一样,又有哪些方法去改变和统一呢?网络上有很多资源对这些知识点进行了介绍,但是查看之后我发现大都比较零散且阅读顺序容易让新人疑惑,在这里我尝试根据几篇文章糅合了一个循序渐进的知识点整理。在正式开始介绍之前,我们先集中看看几个基本概念。

    • 设备像素(device pixel, dp): 又称为物理像素。指设备能控制显示的最小物理单位,意指显示器上一个个的点。从屏幕在工厂生产出的那天起,它上面设备像素点就固定不变了,单位 pt。pt 在 css 单位中属于真正的绝对单位,1pt = 1/72(inch), inch及英寸,而1英寸等于2.54厘米。所以设备像素的特点就是大小固定,不可变。比如 iPhone 5 的分辨率为 640 x 1136px.
    • CSS像素(css pixel, px): 又称为虚拟像素,也可以理解为直觉像素。CSS 像素是 Web 编程的概念,指的是 CSS 样式代码中使用的逻辑像素。在 CSS 规范中,长度单位可以分为两类,绝对(absolute)单位以及相对(relative)单位。px 是一个相对单位,相对的是前面所说的设备像素(device pixel)。比如 iPhone 5 的 CSS 像素数为 320 x 568px.

    像素概念汇总

    前面说到的 px 相对单位指的是图像显示的基本单元,它既不是一个确定的物理量,也不是一个点或者小方块,而是一个抽象概念。 刚刚提到了图像显示的基本单元,这个东西在不同设备上又是不一样的,例如显示器上的物理像素指的是显示器的点距,而打印机的物理像素则指的是打印机的墨点。

    作为一个抽象概念,CSS 像素又具有两个方面的相对性,即:

    • 在同一个设备上,每1个 CSS 像素所代表的设备像素是可以变化的(即CSS像素的第一方面的相对性);
    • 在不同的设备之间,每1个 CSS 像素所代表的设备像素是可以变化的(即CSS像素的第二方面的相对性);

    所以,CSS中的1px(CSS像素 可变)!== 设备的1px(设备像素 不可变)。

    CSS 像素的真正含义

    按照 CSS 规范的定义,CSS 中的 px 是一个相对长度,它相对的,是 viewing device 的分辨率。这个 viewing device,通常就是电脑显示器。典型的电脑显示器的分辨率是96DPI,也就是1像素为1/96英寸(实际上,假设我们的显示器分辨率都与物理分辨率一致,而液晶点距其实是0.25mm到0.29mm之间,所以不太可能是正好1/96英寸,而只是接近)。

    一般来说,px 就是对应设备的物理像素,然而如果输出设备的解析度与电脑显示器大不相同,输出效果就会有问题。例如打印机输出到纸张上,其解析度比电脑屏幕要高许多,如果不缩放,直接使用设备的物理像素,那电脑上的照片由 600DPI 的打印机打出来就比用显示器看小了约6倍。

    由于不同的物理设备的物理像素的大小是不一样的,所以 CSS 认为浏览器应该对 CSS 中的像素进行调节,使得浏览器中 1个 CSS 像素的大小在不同物理设备上看上去大小总是差不多,目的是为了保证阅读体验的一致。为了达到这一点,浏览器可以直接按照设备的物理像素大小进行换算,而 CSS 规范中使用参考像素来进行换算。

    一个参考像素即为从一臂之遥看解析度为 96DPI 的设备输出(即1英寸96点)时,1点(即1/96英寸)的视角。它并不是1/96英寸长度,而是从一臂之遥的距离处看解析度为 96DPI 的设备输出一单位(即1/96英寸)时视线与水平线的夹角。通常认为常人臂长为28英寸,所以它的视角是: (1/96)in / (28in * 2 * PI / 360deg) = 0.0213度。如下图是一个示意图:

    对于人来说,眼睛看到的大小取决于可视角度。而可视角度取决于物体的实际大小以及物体与眼睛的距离。10米远处一个1米见方的东西,与1米远处的10厘米见方的东西,看上去的大小差不多是一样的,所谓一叶障目不见泰山,讲的就是这个常识。

    左边的屏幕(可以认为是电脑屏幕)的典型视觉距离是71厘米即28英寸,其1px对应了0.28mm;而右边的屏幕(可以认为是你的42寸高清电视)的典型视觉距离是3.5米即120英寸,其1px对应1.3mm。42寸的1080p电视,分辨率是1920*1080,则其物理像素只有0.5mm左右。

    综上,px 是一个相对单位,而且在特定设备上总是一个近似值(原则是尽量接近参考像素)。

    然而,如果你把绝对单位理解为对输出效果的绝对掌控,事情却大相径庭。就网页输出的最主要对象——电脑屏幕来说,px 可被视为一个基准单位——与桌面分辨率一致,如果是液晶屏,则几乎总是与液晶屏物理分辨率一致——也就是说网页设计者设定的1px,就是“最终打开这个网页的用户在显示器上看到的1个点距”!反倒是那些绝对单位,其实一点也不绝对。

    那么 px 都会受哪些因素的影响而变化?

    • 每英寸像素(pixel per inch, ppi/PPI): 它表示的是每英寸所拥有的像素(pixel)数目,更确切的说法应该是像素密度,放到显示器上说的是每英寸多少物理像素及显示器设备的点距。数值越高,代表显示屏能够以越高的密度显示图像。
    • 设备像素比(device pixel ratio, dpr/DPR): 它描述的是未缩放状态下,设备像素和 CSS 像素的初始比例关系,也可以解释为默认缩放比例。如何理解这个概念呢?通俗来说,它是指在开发中1个 CSS 像素占用多少设备像素,如 dpr=2 代表1个 CSS 像素用2x2个设备像素来绘制,所以,可以理解为 1px由多少个设备像素组成
    • DPI: 每英寸多少点。

    当用于描述显示器时,我们可以吧 ppi 和 dpi 认为是同一个概念。那么 ppi 和 dpr 到底是什么关系呢? ppi 用作显示设备的工业标准,业界人士用 ppi 的值来衡量一个屏幕是否为高清屏,然后根据得到的密度分界来获得此时对应的 dpr 值,也即默认缩放比例。 dpr 和 ppi 相关,一般 dpr 为 ppi/160 的整数倍,如下所示:

    | 项名 | ldpi | mdpi | hdpi | xhdpi | |---| ----- | -------- | ---------- | |密度分界(密度值)|120|160|240|320| |屏幕尺寸(分辨率)|240×320|320×480|480×800|640×960| |默认缩放比例|0.75|1.0|1.5|2.0|

    了解了这两个概念后,我们可以来说说导致 CSS 中 px 变化的因素了。

    • 像素密度:从 iPhone4 开始,苹果推出了 Retina 屏,分辨率提高了一倍(640*960),而屏幕尺寸却没变。这时一个css像素=2个设备像素(换算公式为 1px = (dpr)^2 * 1dp, 必须让css中的1px代表更多的设备像素,才能让1px的东西在屏幕上的大小与那些低分辨率的设备差不多,否则会因太小而看不清),即 DPR=2,示意图如下:

    • 缩放操作:缩放也会引起 css 中 px 的变化。放大页面到200%,字体大小与元素宽度的像素值不变,只是css的1px代表设备像素中的4px,宽高都是200%,DPR增加了。此时,获取 screen.width 值不变,而 window.innerWidth/Height 值(visual viewport)变成原来的一半。缩放值越大,当前 viewport 宽度会越小。

    如何理解上面说到的缩放呢?放大1倍,原来 1px 的东西变成 2px,但 1px 变为 2px 并不是把原来的 320px 变为 640px,而是在实际宽度不变的情况下,1px 变得跟原来的 2px 的长度(长宽)一样了(元素会占据更多的设备像素),所以放大1倍后原来需要 320px 才能填满的宽度现在只需要 160px,也即原来 320px 的面积里现在只能填入 160px 的东西了。

    举个例子说明 CSS 像素的相对性,如下示意图:

    作为Web开发者,我们接触的更多的是用于控制元素样式的样式单位像素。这里的像素我们称之为CSS像素。假设我们用PC浏览器打开一个页面,浏览器此时的效果如左图所示,但如果我们把页面放大(通过“Ctrl键”加上“+号键”),此时块状容器则横向扩张,如右图所示(黑色为实际效果,灰色为原来效果)。吊诡的是此时我们既没有调整浏览器窗口大小,也没有改变块状元素的css宽度,但是它看上去却变大了一倍——这是因为我们把CSS像素放大为了原来的两倍。

    也就是说默认情况下一个CSS像素应该是等于一个物理像素的宽度的,但是浏览器的放大操作让一个CSS像素等于了多个设备像素宽度。

    • 设备独立像素(Device independent Pixel, DIP): 也称为逻辑像素,简称 DIP.

    像素换算与倍率

    DPR = 设备像素 / CSS像素 = 屏幕横向设备像素 / 理想视口的宽
    CSS像素 = 设备独立像素 = 逻辑像素
    

    有关倍率,我们用 iPhone 3gs 和 4s 来举例。假设有个邮件列表界面,我们不妨按照PC端网页设计的思维来想象。3gs上大概只能显示4-5行,4s就能显示9-10行,而且每行会变得特别宽。但两款手机其实是一样大的。如果照这种方式显示,3gs上刚刚好的效果,在4s上就会小到根本看不清字。

    在现实中,这两者效果却是一样的。这是因为Retina屏幕把2x2个像素当1个像素使用。比如原本44像素高的顶部导航栏,在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小,反而和3gs效果一样了。画质却更清晰。

    在以前,iOS应用的资源图片中,同一张图通常有两个尺寸。你会看到文件名有的带@2x字样,有的不带。其中不带@2x的用在普通屏上,带@2x的用在Retina屏上。只要图片准备好,iOS会自己判断用哪张,Android道理也一样。

    由此可以看出,苹果以普通屏为基准,给Retina屏定义了一个2倍的倍率(iPhone 6plus除外,它达到了3倍)。实际像素除以倍率,就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同,它们的显示效果就是相同的。

    Viewport

    什么是 viewport? 通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。在默认情况下,一般来讲,移动设备上的viewport都是要大于浏览器可视区域的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或1024px(也可能是其它值,这个是由设备自己决定的),但带来的后果就是浏览器会出现横向滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

    首先,移动设备上的浏览器认为自己必须能让所有的网站都正常显示,即使是那些不是为移动设备设计的网站。但如果以浏览器的可视区域作为viewport的话,因为移动设备的屏幕都不是很宽,所以那些为桌面浏览器设计的网站放到移动设备上显示时,必然会因为移动设备的viewport太窄,而挤作一团,甚至布局什么的都会乱掉。也许有人会问,现在不是有很多手机分辨率都非常大吗,比如768x1024,或者1080x1920这样,那这样的手机用来显示为桌面浏览器设计的网站是没问题的吧?前面我们已经说了,css中的1px并不是代表屏幕上的1px,你分辨率越大,css中1px代表的物理像素就会越多,DPR 的值也越大,这很好理解,因为你分辨率增大了,但屏幕尺寸并没有变大多少,必须让css中的1px代表更多的物理像素,才能让1px的东西在屏幕上的大小与那些低分辨率的设备差不多,不然就会因为太小而看不清。所以在1080x1920这样的设备上,在默认情况下,也许你只要把一个div的宽度设为300多px(视 DPR 的值而定),就是满屏的宽度了。为了防止某些网站因为viewport太窄而显示错乱,所以这些浏览器就决定默认情况下把viewport设为一个较宽的值,比如980px,这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。ppk大神 把这个浏览器默认的viewport叫做 layout viewport。这个 layout viewport 的宽度可以通过 document.documentElement.clientWidth 来获取。

    然而,layout viewport 的宽度是大于浏览器可视区域的宽度的,所以我们还需要一个viewport来代表 浏览器可视区域的大小,我们叫他 visual viewport。visual viewport 的宽度可以通过 window.innerWidth 来获取,但在 Android 2, Oprea mini 和 UC 8 中无法正确获取。下图为两个 viewport 的示意图:

    现在我们已经有两个viewport了 - layout viewport 和 visual viewport。但浏览器觉得还不够,因为现在越来越多的网站都会为移动设备进行单独的设计,所以必须还要有一个能完美适配移动设备的 viewport。所谓的完美适配指的是,首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容;第二,显示的文字的大小是合适,比如一段14px大小的文字,不会因为在一个高密度像素的屏幕里显示得太小而无法看清,理想的情况是这段14px的文字无论是在何种密度屏幕,何种分辨率下,显示出来的大小都是差不多的。当然,不只是文字,其他元素像图片什么的也是这个道理,这就是第三个 viewport ——移动设备的理想 viewport (ideal viewport)。

    ideal viewport 并没有一个固定的尺寸,不同的设备拥有有不同的 ideal viewport。所有 iPhone 的 ideal viewport 宽度都是320px,无论它的屏幕宽度是320还是640,也就是说,在 iPhone 中,css 中的 320px 就代表 iPhone 屏幕的宽度。

    但是安卓设备就比较复杂了,有320px的,有360px的,有384px的等等,关于不同的设备ideal viewport的宽度都为多少,可以到 http://viewportsizes.com 去查看一下,里面收集了众多设备的理想宽度。

    总结一下,ppk把移动设备上的viewport分为layout viewport, visual viewport 和 ideal viewport 三类:

    • ideal viewport是最适合移动设备的viewport,ideal viewport的宽度等于移动设备的屏幕宽度,只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px),那么这个元素的宽度就是设备屏幕的宽度了,也就是宽度为100%的效果。ideal viewport 的意义在于,无论在何种分辨率的屏幕下,那些针对ideal viewport 而设计的网站,不需要用户手动缩放,也不需要出现横向滚动条,都可以完美的呈现给用户;
    • layout viewport 表示的是浏览器默认的viewport,一般情况下这个宽度要大于浏览器可视区域宽度;
    • visual viewport 表示浏览器可视区域的大小。

    利用 meta 标签对 viewport 进行控制

    viewport是专为手机浏览器设计的一个meta标签,一个简单的示例如下所示:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    其中,width=device-width 表示此宽度不依赖于原始象素(px),而依赖于屏幕的宽度。移动设备默认的viewport是layout viewport,也就是那个比屏幕要宽的viewport,但在进行移动设备网站的开发时,我们需要的是ideal viewport。我们在开发移动设备的网站时,最常见的的一个动作就是把上面这个东西复制到我们的head标签中,它的作用是让当前的 viewport 宽度等于设备宽度,同事不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求,但让viewport的宽度等于设备的宽度,这个应该是大家都想要的效果,如果你不这样的设定的话,那就会使用那个比屏幕宽的默认viewport,也就是说会出现横向滚动条。

    这个name为viewport的meta标签到底有哪些东西呢,又都有什么作用呢?meta viewport 标签首先是由苹果公司在其safari浏览器中引入的,目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿,引入对meta viewport的支持,事实也证明这个东西还是非常有用的。在苹果的规范中,meta viewport 有6个可以设置的内容:

    内容含义
    width 设置layout viewport 的宽度,为一个正整数,或字符串"device-width"
    initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
    minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
    maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
    height 设置layout viewport 的高度,这个属性对我们并不重要,很少使用
    user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许

    这些属性可以同时使用,也可以单独使用或混合使用,多个属性同时使用时用逗号隔开就行了。此外,在安卓中还支持 target-densitydpi 这个私有属性,它表示目标设备的密度等级,作用是决定css中的1px代表多少物理像素,但作为将要废弃的属性,所以使用中需要避免该用法。我们接下来看看具体的几个用法:

    • width=device-width: 所有浏览器都能把当前的viewport宽度变成ideal viewport的宽度,但要注意的是,在iPhone和iPad上,无论是竖屏还是横屏,宽度都是竖屏时ideal viewport的宽度。
    • initial-scale=1: 这句代码也能达到和前一句代码一样的效果,也可以把当前的的viewport变为 ideal viewport。

    要想清楚这件事情,首先你得弄明白这个缩放是相对于什么来缩放的,因为这里的缩放值是1,也就是没缩放,但却达到了 ideal viewport 的效果,所以,那答案就只有一个了,缩放是相对于 ideal viewport来进行缩放的。

    但如果width 和 initial-scale=1同时出现,并且还出现了冲突呢?

    <meta name="viewport" content="width=400, initial-scale=1">

    width=400表示把当前viewport的宽度设为400px,initial-scale=1则表示把当前viewport的宽度设为ideal viewport的宽度,那么浏览器到底该服从哪个命令呢?是书写顺序在后面的那个吗?不是。当遇到这种情况时,浏览器会取它们两个中较大的那个值。例如,当width=400,ideal viewport的宽度为320时,取的是400;当width=400, ideal viewport的宽度为480时,取的是ideal viewport的宽度。(ps:在uc9浏览器中,当initial-scale=1时,无论width属性的值为多少,此时viewport的宽度永远都是ideal viewport的宽度)

    最后,总结一下,要把当前的viewport宽度设为ideal viewport的宽度,既可以设置 width=device-width,也可以设置 initial-scale=1,但这两者各有一个小缺陷,就是iphone、ipad以及IE 会横竖屏不分,通通以竖屏的ideal viewport宽度为准。所以,最完美的写法应该是,两者都写上去,这样就 initial-scale=1 解决了 iphone、ipad的毛病,width=device-width则解决了IE的毛病。关于缩放,我们可以得出以下一个式子:

    当前缩放值 = ideal viewport宽度  / visual viewport宽度
    

    大多数浏览器都符合这个理论,但是安卓上的原生浏览器以及IE有些问题。安卓自带的webkit浏览器只有在 initial-scale = 1 以及没有设置width属性时才是表现正常的,也就相当于这理论在它身上基本没用;而IE则根本不甩initial-scale这个属性,无论你给他设置什么,initial-scale表现出来的效果永远是1。

    好了,现在再来说下initial-scale的默认值问题,就是不写这个属性的时候,它的默认值会是多少呢?很显然不会是1,因为当 initial-scale = 1 时,当前的layout viewport宽度会被设为 ideal viewport的宽度,但前面说了,各浏览器默认的 layout viewport宽度一般都是980啊,1024啊,800啊等等这些个值,没有一开始就是 ideal viewport的宽度的,所以 initial-scale的默认值肯定不是1。安卓设备上的initial-scale默认值好像没有方法能够得到,或者就是干脆它就没有默认值,一定要你显示的写出来这个东西才会起作用,我们不管它了,这里我们重点说一下iphone和ipad上的initial-scale默认值。

    根据测试,我们可以在iphone和ipad上得到一个结论,就是无论你给layout viewpor设置的宽度是多少,而又没有指定初始的缩放值的话,那么iphone和ipad会自动计算initial-scale这个值,以保证当前layout viewport的宽度在缩放后就是浏览器可视区域的宽度,也就是说不会出现横向滚动条。比如说,在iphone上,我们不设置任何的viewport meta标签,此时layout viewport的宽度为980px,但我们可以看到浏览器并没有出现横向滚动条,浏览器默认的把页面缩小了,此时值应为 0.33 左右。

    所以总结一下:在iphone和ipad上,无论你给viewport设的宽的是多少,如果没有指定默认的缩放值,则iphone和ipad会自动计算这个缩放值,以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。

    JavaScript 动态更改 meta viewport 标签

    • 方法一:可以使用document.write来动态输出meta viewport标签
    document.write('<meta name="viewport" content="width=device-width,initial-scale=1">');
    
    • 方法二:通过 setAttribute 方法改变
    <meta id="testViewport" name="viewport" content="width = 380">
    <script>
    let mvp = document.getElementById('testViewport');
    mvp.setAttribute('content','width=480');
    </script>
    

    但是要注意,在安卓2.3(或许是所有2.x版本中)的自带浏览器中,对meta viewport标签进行覆盖或更改,会出现让人非常迷糊的结果。

    总结一下,每个移动设备浏览器中都有一个理想的宽度,这个理想的宽度是指css中的宽度,跟设备的物理宽度没有关系,在css中,这个宽度就相当于100%的所代表的那个宽度。我们可以用meta标签把viewport的宽度设为那个理想的宽度,如果不知道这个设备的理想宽度是多少,那么用device-width这个特殊值就行了,同时initial-scale=1也有把viewport的宽度设为理想宽度的作用。

    为什么需要有理想的viewport呢?比如一个分辨率为320x480的手机理想viewport的宽度是320px,而另一个屏幕尺寸相同但分辨率为640x960的手机的理想viewport宽度也是为320px,那为什么分辨率大的这个手机的理想宽度要跟分辨率小的那个手机的理想宽度一样呢?这是因为,只有这样才能保证同样的网站在不同分辨率的设备上看起来都是一样或差不多的。

    转载于:https://www.cnblogs.com/libin-1/p/7148377.html

    展开全文
  • YUV像素和ycbcr

    2019-09-26 23:32:04
    一幅彩色图像的基本要素是什么? 说白了,一幅图像包括的基本东西就是二...这个大小跟多少个像素数据的存储格式有关。下面简述yuv与像素的关系: YUV与像素的关系: YUV是利用一个亮度(Y)、两个色差(U,V)来...

    一幅彩色图像的基本要素是什么?

    说白了,一幅图像包括的基本东西就是二进制数据,其容量大小实质即为二进制数据的多少。一幅1920x1080像素的YUV422的图像,大小是1920X1080X2=4147200(十进制),也就是3.95M大小。这个大小跟多少个像素点和数据的存储格式有关。下面简述yuv与像素的关系:

    YUV与像素的关系:

    YUV是利用一个亮度(Y)、两个色差(U,V)来代替传统的RGB三原色来压缩图像。传统的RGB三原色使用红绿蓝三原色表示一个像素,每种原色占用一个字节(8bit),因此一个像素用RGB表示则需要8*3=24bit。如果使用YUV表示这个像素,假设YUV的采样率为:4:2:0,即每一个像素对于亮度Y的采样频率为1,对于色差U和V,则是每相邻的两个像素各取一个U和V。对于单个的像素来说,色差U和V的采样频率为亮度的一半。如有三个相邻的像素,如果用RGB三原色表示,则共需要占用:8*3*3=72bits;如果采用YUV(4:2:0)表示,则只需要占用:8*3(Y)+ 8*3*0.5(U)+8*3*0.5(V)= 36bits。只需原来一半的空间,就可以表示原来的图像,数据率压缩了一倍,而图像的效果基本没发生变化。

    一般描述一幅图像的参数时我们会考虑以下几点:

    1、宽:一行有多少个像素点。2、高:一列有多少个像素点。3、YUV格式还是RGB格式?4、一行多少个字节?5、图像大小是多少?6、图像的分辨率是多少?

    以下对YUV422、YUV420和YUV444进行初步解析:

    YUV422格式。

    分为很多小类,按照U、V的排列可以有YUYV,YVYU,UYVY,VYUY四种,其中,YUYVY一般又称作yuv2格式。

    而这四种YUV422格式,每种又可以分为2小类,按Y和UV的排列可以有打包格式和平面格式。例如,一个640×480×2的YUV文件,打包格式就是YUYVYUYV这样一直排列下去,平面格式就是先640×480个Y排列完,然后是640×240个U,然后是640×240个V这样排列,如下

    图:

     

    假如有一幅640×480的图片,用yuv422来表示,那么,采样方式就是每个像素采样Y信号,U,V信号隔一个采样,这样算下来,就有640×480个Y,640×240个U,640×240个V,一幅640×480大小的YUV图片占的总字节数为640×480×2个字节,每像素2个字节,也就是16位。

    在内存种中这样排列:Y0U0Y1V0 Y2U1Y3V1...

    第一个像素的YUV值为:Y0 U0 V0

    第二个像素的YUV值为: Y1 U0 V0

    第三个像素的YUV值为: Y2 U1 V1

    .....其他以此推类,也就是说每两个像素是共用了UV的;在一行上来看,每个像素的YUV值中Y值被采样,UV值采样0后,跳到3,然后5,所以每行上Y有640个,U,V各320个。

    主要的采样格式有YCbCr 4:2:0、YCbCr 4:2:2、YCbCr 4:1:1和 YCbCr 4:4:4。其中YCbCr 4:1:1 比较常用,其含义为:每个点保存一个 8bit 的亮度值(也就是Y值), 每 2x2 个点保存一个 Cr 和Cb 值, 图像在肉眼中的感觉不会起太大的变化。所以, 原来用 RGB(R,G,B 都是 8bit unsigned) 模型, 4 个点需要 8x3=24 bites(如下图第一个图). 而现在仅需要 8+(8/4)+(8/4)=12bites, 平均每个点占12bites,这样就把图像的数据压缩了一半。

    以上仅给出了理论上的示例,在实际数据存储中是有可能是不同的,下面给出几种具体的存储形式:

    (1) YUV 4:4:4

    YUV三个信道的抽样率相同,因此在生成的图像里,每个象素的三个分量信息完整(每个分量通常8比特),经过8比特量化之后,未经压缩的每个像素占用3个字节。

    下面的四个像素为: [Y0 U0 V0] [Y1 U1 V1] [Y2 U2 V2] [Y3 U3 V3]

    存放的码流为: Y0 U0 V0 Y1 U1 V1 Y2 U2 V2 Y3 U3 V3

    (2) YUV 4:2:2

    每个色差信道的抽样率是亮度信道的一半,所以水平方向的色度抽样率只是4:4:4的一半。对非压缩的8比特量化的图像来说,每个由两个水平方向相邻的像素组成的宏像素需要占用4字节内存(亮度2个字节,两个色度各1个字节)。

    下面的四个像素为: [Y0 U0 V0] [Y1 U1 V1] [Y2 U2 V2] [Y3 U3 V3]

    存放的码流为: Y0 U0 Y1 V1 Y2 U2 Y3 V3

    映射出像素点为:[Y0 U0 V1] [Y1 U0 V1] [Y2 U2 V3] [Y3 U2 V3]

    (3) YUV 4:1:1

    4:1:1的色度抽样,是在水平方向上对色度进行4:1抽样。对于低端用户和消费类产品这仍然是可以接受的。对非压缩的8比特量化的视频来说,每个由4个水平方向相邻的像素组成的宏像素需要占用6字节内存(亮度4个字节,两个色度各1个字节)。

    下面的四个像素为: [Y0 U0 V0] [Y1 U1 V1] [Y2 U2 V2] [Y3 U3 V3]

    存放的码流为: Y0 U0 Y1 Y2 V2 Y3

    映射出像素点为:[Y0 U0 V2] [Y1 U0 V2] [Y2 U0 V2] [Y3 U0 V2]

    (4)YUV4:2:0

    4:2:0并不意味着只有Y,Cb而没有Cr分量。它指得是对每行扫描线来说,只有一种色度分量以2:1的抽样率存储。相邻的扫描行存储不同的色度分量, 也就是说,如果一行是4:2:0的话,下一行就是4:0:2,再下一行是4:2:0...以此类推。对每个色度分量来说,水平方向和竖直方向的抽样率都是 2:1,所以可以说色度的抽样率是4:1。对非压缩的8比特量化的视频来说,每个由2x2个2行2列相邻的像素组成的宏像素需要占用6字节内存(亮度4个字节,两个色度各1个字节)。

    下面八个像素为:[Y0 U0 V0] [Y1 U1 V1] [Y2 U2 V2][Y3 U3 V3]

    [Y5U5 V5] [Y6 U6 V6] [Y7U7 V7] [Y8 U8 V8]

    存放的码流为:Y0 U0 Y1 Y2 U2 Y3

    Y5V5 Y6 Y7 V7 Y8

    映射出的像素点为:[Y0 U0 V5] [Y1 U0 V5] [Y2 U2 V7] [Y3 U2 V7]

    [Y5U0 V5] [Y6 U0 V5] [Y7U2 V7] [Y8 U2 V7]

     

    YCbCr采样格式

    4:4:4 采样就是说三种元素Y,Cb,Cr有同样的分辨率,这样的话,在每一个像素点上都对这三种元素进行采样.数字4是指在水平方向
    上对于各种元素的采 样率,比如说,每四个亮度采样点就有四个Cb的Cr采样值.4:4:4采样完整地保留了所有的信息值.4:2:2采样中
    (有时记为YUY2),色 度元素在纵向与亮度值有同样的分辨率,而在横向则是亮度分辨率的一半(4:2:2表示每四个亮度值就有两个Cb
    和Cr采样.)4:2:2视频用来 构造高品质的视频彩色信号.

    在流行的4:2:0采样格式中(常记为YV12)Cb和Cr在水平和垂直方向上有Y分辨率的一半.4:2:0 有些不同,因为它并不是指在实际采样
    中使用4:2:0,而是在编码史中定义这种编码方法是用来区别于4:4:4和4:2:2方法的).4:2:0 采样被广泛地应用于消费应用中,比如
    视频会议,数字电视和DVD存储中。因为每个颜色差别元素中包含了四分之一的Y采样元素量,那么 4:2:0YCbCr视频需要刚好4:4:4
    或RGB视频中采样量的一半。

    4:2:0采样有时被描述是一个"每像素12位"的方 法。这么说的原因可以从对四个像素的采样中看出.使用4:4:4采样,一共要进行12次
    采样,对每一个Y,Cb和Cr,就需要12*8=96位,平均下来要96/4=24位。使用4:2:0就需要6*8=48位,平均每个像素48/4=12位。

    在一个4:2:0隔行扫描的视频序列 中,对应于一个完整的视频帧的Y,Cb,Cr采样分配到两个场中。可以得到,隔行扫描的总采样数跟
    渐进式扫描中使用的采样数目是相同的。

    转载于:https://www.cnblogs.com/biglucky/p/4128450.html

    展开全文
  • 这两个有什么区别呢? 先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点; pt就是point,是印刷行业常用单位,等于1/72英寸。 这样很明白,px是一个点,它不是自然界的长度单位,谁能...
    字体大小的设置单位,常用的有2种:px、pt。这两个有什么区别呢?

    先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点;

    pt就是point,是印刷行业常用单位,等于1/72英寸。

    这样很明白,px是一个点,它不是自然界的长度单位,谁能说出一个“点”有多长多大么?可以画的很小,也可以很大。如果点很小,那画面就清晰,我们称它为“分辨率高”,反之,就是“分辨率低”。所以,“点”的大小是会“变”的,也称为“相对长度”。

    pt全称为point,但中文不叫“点”,查金山词霸可以看到,确切的说法是一个专用的印刷单位“磅”,大小为1/72英寸。所以它是一个自然界标准的长度单位,也称为“绝对长度”。

    因此就有这样的说法,pixel是相对大小,而point是绝对大小。

     

    分清“屏幕效果”和“打印效果”:

    在浏览网页过程中,所有的“大”“小”概念,都是基于“屏幕”这个“界面”上。“屏幕”上的各种信息,包括文字、图片、表格等等,都会随屏幕的分辨率变化而变化,一个100px宽度大小的图片,在800×600分辨率下,要占屏幕宽度的1/8,但在1024×768下,则只占约1/10。所以如果在定义字体大小时,使用px作为单位,那一旦用户改变显示器分辨率从800到1024,用户实际看到的文字就要变“小”(自然长度单位),甚至会看不清,影响浏览。

    那是不是用pt做单位就没这样的问题呢?错!问题同样出现。刚才的例子已经很清楚的说明,在不同分辨率下,无论是px还是pt,都会改变大小。以现在的电脑屏幕情况,还没有一种单位可以保证,在不同分辨率下,一个文字大小可以“固定不变”。因为这很难以实现也不是很有必要:全球电脑用户以亿来数,屏幕从14寸到40寸甚至更高都有,屏幕大小不同,分辨率也不同,要保证一个字体在所有用户面前大小一样,实在是MISSION IMPOSSIBLE。另外,电脑有其自身的调节性。

    那在页面设计中到底是用px还是pt呢?

    我认为,这个并没有什么原则性差异,就看自己处于什么角度思考了。

    Mac机怎么情况不清楚,在Windows里,默认的显示设置中,把文字定义为96DPI(PPI,微软都将DPI和PPI混为一体,我们也就无须较真了)。这样的定义,说明了:1px=1/96英寸。联系pt的概念,1pt=1/72英寸,可以得出,在这样的设置中,1px=0.75pt,常见的宋体9pt=12px。在显示器分辨率不变的基础上(比如现在常用的1024×768),1px大小也就固定不变,改变显示设置,调整为144DPI,可以得出,1px=0.5pt,常见的宋体9pt=18px。原先用12px来组成的一个文字,现在需要18px来组成,px多了,文字就“大”了,更易阅读了。

    所以,px和pt的使用区别,只有当用户改变默认的96DPI下才会产生:使用px定义文字,无论用户怎么设置,都不会改变大小;使用pt定义文字,当用户设置超过96DPI的值,数值越大,字体就越大。

      (附公式:px = pt * DPI / 72) 对了,刚才还提到改变浏览器中文字大小的选项,也可以改变网页的文字大小。但在这种情况下,使用px和pt都是无效的,因为这2个都是有实际“pixel”数值的单位,比如9pt是12px,大小固定。这里要引用新的单位:em,其实就是%。因为当网页中的字体没有给出实际的px或pt定义的话,会有一个默认值:12pt即16px,对应浏览器中“字体大小”中的“中等”,以这个为标准,变大或缩小。(只适用于IE,在FF中,即便定义px或pt也都可以变大变小)

    所以,从这个概念上看,em才是真正的“相对单位”(百分比嘛,当然是相对),而px和pt都是绝对单位(都有固定值)。

    在网页设计中,面向用户的屏幕的基本单位是px,因此使用px作为单位是最简单也最容易理解的,而pt也不过是通过了Windows的设置乘上了一个比率转变成px再显示,算是绕了个圈子。参考大部分大型网站,包括Adobe和Microsoft,都是使用px作为单位,而且在HTML中,默认的单位就是px,是不是也暗示着px是网页设计的“内定单位”?

      但在Word或Photoshop中,使用pt就相当方便。因为使用Word和Photoshop的主要目的都不是为了屏幕浏览,而是输出打印。当打印到实体时,pt作为一个自然长度单位就方便实用了:比如Word中普通的文档都用“宋体 9pt”,标题用“黑体 16pt”等等,无论电脑怎么设置,打印出来永远就是这么大。又或者在Photoshop中,设置一个图片中的某个艺术效果的字体是72pt大小,然后分别将这张图片设为300DPI和72DPI,再打印出来,就可以看出,这2个字体大小完全一样,只是“清晰度”不同,300DPI更清晰。这是毫无疑问的结果。

      最后整理一下所有出现过的单位:

      px:pixel,像素,屏幕上显示的最小单位,用于网页设计,直观方便;

      pt:point,是一个标准的长度单位,1pt=1/72英寸,用于印刷业,非常简单易用;

      em:即%,在CSS中,1em=100%,是一个比率,结合CSS继承关系使用,具有灵活性。

      PPI(DPI):pixel(dot)per inch,每英寸的像素(点)数,是一个率,表示了“清晰度”,“精度”

     

    PX和PT转换的公式:

    以前在文章中介绍过PX和PT的转换规则,其实很简单,pt=px乘以3/4。

    比如12px×3/4=9pt大小。

    PX和em转换的公式:

    对于PX转em的方法也类似,就是em=16乘以px,也就是说1.5em=1.5×16=24px。

    附px、em、%和pt换算表

    px、em、%和pt换算


    展开全文
  • 屏幕尺寸:对角线的长度...一个css像素占据多少个物理像素和屏幕的特性(高清)和用户的缩放行为有关(将屏幕内容放大或缩小) 设备独立像素:是设备对接css像素的接口,一旦css像素与独立像素挂上勾(width=de...

    屏幕尺寸:对角线的长度(厘米)
    屏幕分辨率:横纵向上物理像素的个数(物理像素),单位是px。1px=1个像素点,一般以纵向像素横向像素来表示一个手机的分辨率,比如19601080.
    物理像素:分辨率,是屏幕成像的最小单位
    css像素:是web开发者使用的最小单位,也就是我们经常写的width=多少px中的px
    一个css像素最终一定会转成物理像素去屏幕上呈像
    一个css像素占据多少个物理像素和屏幕的特性(高清)和用户的缩放行为有关(将屏幕内容放大或缩小)
    设备独立像素:是设备对接css像素的接口,一旦css像素与独立像素挂上勾(width=device-width),此时,像素比(一个方向上占满一块屏幕需要的物理像素的个数/一个方向上占满一块屏幕需要的设备独立像素个数)才能发挥真正的作用
    位图像素:图片的最小单位,位图像素与物理像素一比一时,图片才能完美清晰的展示

    展开全文
  • 像素和相对长度 之前的笔记中,我们提到过用属性width、height来设置图片的尺寸,它们的单元都是”px(像素)”。长度单位总结一下,目前比较常用到px(像素)、em、% 百分比,要注意其实这三种单位都是相对单位。1...
  •   如果想搞清楚为什么移动端要适配和1px像素的问题,首先就是要了解为什么会出现这两个问题,这就和物理像素和逻辑像素有关。 物理像素   物理像素是组成相机成像传感器的最基础单元。移动设备出厂时,就具备的...
  • 【干货】Ae的预览渲染到底吃什么配置 文字总结一下: CPU:在新一代架构的前提下,核心数越高越好,而到八核时,提高主频,目前来说最佳的是9900K 内存:1080P 60帧 20秒 8Bit的视频16G起步,4K 60帧 20秒 8...
  • 前面了解学习了ps的界面以及工具等等,今天就开始学习到图像的基本编辑方法。在开始编辑之前呢,我们还需要对图像有一个明确的认识,得知道这个东西是由什么组成的,有哪些特性?才能帮助我们在后期的操作中明白...
  • 显微镜的分辨率与什么有关?显微镜的分辨率是由物镜决定的,分辨率与波长物镜数值孔径有关系。减小波长提高数值孔径可以提高显微镜的分辨率。分辨率决定了位图图像细节的精细程度。分辨率分辨率可以从显示分辨率...
  • YUV格式&像素

    2019-09-29 10:43:10
    一幅彩色图像的基本要素是什么? 说白了,一幅图像包括的基本东西就是二...这个大小跟多少个像素数据的存储格式有关。下面简述yuv与像素的关系: YUV与像素的关系: YUV是利用一个亮度(Y)、两个色差(U,V)来...
  • 这篇文章要弄清楚2个问题:一、什么是逻辑像素和物理像素;二、这两者有什么关系。  对于问题一,先抛出两个概念。我们经常使用的px就是逻辑像素,是浏览器使用的抽象单位;物理像素又和dp/pt(设备无关像素)、...
  • 什么DIV设置像素为width:220px; height:380px; 在实际显示的时候却是222px382px???
  • Temper是一款基于ESP8266SHT30的紧凑型低功耗温度传感器,具有13x7像素大型LED显示屏。 低功耗,睡眠时仅消耗约30-40uA。如果使用400mA电池,则一次充电即可使用几个月。 SHT30提供了非常准确的,经过工厂校准的...
  • 一幅彩色图像的基本要素是什么? 说白了,一幅图像包括的基本东西...这个大小跟多少个像素数据的存储格式有关。下面简述yuv与像素的关系: YUV与像素的关系: YUV是利用一个亮度(Y)、两个色差(U,V)来代替...
  • android开发中像素单位介绍

    千次阅读 2015-03-06 16:03:04
    我们在开发android应用的时候,界面布局算得上是开发的第一步。布局就是要设置界面及控件的大小... 不同设备有不同的显示效果,这个设备硬件有关,一般我们为了支持WVGA、HVGAQVGA 推荐使用这这个,不依赖像素。 d
  • ˚F安全下载 - 到底什么人需要了解有关到F安全下载 使用F安全下载万维网电视机程序相关 人们现在可以受益于视频点播谢谢女王电视,跨平台的电子资料内容集中在知名电影的供应商。第一个国家采取这种合作的优势包括...
  • 2.查阅了一些有关SURF的资料,上面说它SIFT算法中的一个不同是SURF算法在生成尺度空间的过程中图片的大小是始终不变的,但是也有不同的octave层,资料上说生成不同octave层的原因是改变高斯模糊尺寸大小得到的,那...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 185
精华内容 74
关键字:

像素和什么有关