码迷,mamicode.com
首页 > 其他好文 > 详细

位图像素

时间:2018-05-04 14:14:10      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:ppi   分割   怎样   物理   计算   图像   ima   系统   alt   

1个位图像素是栅格图像(如:png,jpg,gif等)最小的数据单元。每一个位图像素都包含这一些资深的现实信息(如:显示位置,颜色值,透明度等)。也称物理像素。

dips,(dip或dp或device independent pixels)指的是设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素。

话说回来,dips到底有什么用呢?dip可以用来辅助区分视网膜设备还是非视网膜设备。简单解释一下,视网膜设备指的是分辨率达到300ppi这个‘神奇数字’(每英寸300个像素点)

设备像素比dpr:devicePixelRatio其实指的是window.devicePixelRatio

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

公式表示就是:window.devicePixelRatio = 物理像素 / dips

在普通屏幕下是没问题的,但是在retina屏幕下就会出现位图像素点不够,从而导致图片模糊的情况

对于dpr = 2的, 1个位图像素对应于4个物理像素,由于单个位图像素不可以再进一步分割,所以只能就近取色,从而导致图片模糊。

解决办法使用分辨率大两倍的图片

如200*300 img 标签,就需要提供400*600的图片.由此一来位图像素点的个数是原来的4倍,在retina屏幕下,位图像素点个数就可以物理像素点个数形成1:1 的比例,图片自然就清晰了。

 技术分享图片

这里就还有另一个问题,如果普通屏幕下,也用了两倍图片,会怎样呢?

很明显,在普通屏幕下,200×300(css pixel)img标签,所对应的物理像素个数就是200×300个,而两倍图片的位图像素个数则是200×300*4,所以就出现一个物理像素点对应4个位图像素点,所以它的取色也只能通过一定的算法(显示结果就是一张只有原图像素总数四分之一,我们称这个过程叫做downsampling),肉眼看上去虽然图片不会模糊,但是会觉得图片缺少一些锐利度,或者是有点色差(但还是可以接受的)。

 技术分享图片

 

位图像素

标签:ppi   分割   怎样   物理   计算   图像   ima   系统   alt   

原文地址:https://www.cnblogs.com/wangzhenling/p/8989810.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!