关于图片的一些认识

在项目开发中使用 SDWebImage 来做图片缓存加载,但是遇到一个问题就是服务器的某一张图片始终无法加载出来,通过URL拿到原图之后可以正常查看。于是追根溯源定位到了 SDWebImage 中的 decodedImageWithImage 方法中,也给自己科普了一下图像处理的相关知识。

下面先了解图像的一些基础知识,然后分析遇到的问题。

基础知识

图像可以分为矢量图和位图,我们通常使用的图像为位图格式,这种格式又分为几种颜色模型,如 RGB,CMYK 等,分别适用于不同的场景。

我们常用的 RGB 则是通过颜色发光原理来设计的。其分为红(R)、绿(G)、蓝(B)三个颜色通道,每个通道的数值表示该通道的明暗程度,根据单位像素所占空间不同,其又可以分为RGB1,RGB2,RGB4,RGB8,RGB16,RGB24,RGB32等多种格式,其中RGB1、RGB2,RGB4,RGB8为调色板类型的RGB格式,即需要通过颜色索引表来描述颜色信息,RGB16为高彩色(Hi Color),RGB24为真彩色(TRUE COLOR),RGB32则带Aphal通道(RGBA)。

对于 RGB16,其实也是通过调色板实现的,可以分为 RGB444,RGB565,RGB555三种方式,后面的三个数字分别表示三个通道的数据位数,RGB565 表示红(R)、蓝(B)各占5位,绿(G)占三位,即单像素的表示方式为:RRRRRGGGGGGBBBBB,之所以绿色使用6位是因为人眼对绿色的辨识程度比较高。而RGB555表示为 XRRRRRGGGGGBBBBB ,其中 X 表示该位不使用,由于每个颜色使用5位表示,所以每个通道最多包含32种不同亮度值,相关的索引表也就需要把亮度从明到暗均分成32份,可以通过使用屏蔽字和移位操作来得到RGB各分量的值:

#define RGB555_MASK_RED 0x7C00
#define RGB555_MASK_GREEN 0x03E0
#define RGB555_MASK_BLUE 0x001F
R = (wPixel & RGB555_MASK_RED) >> 10; // 取值范围0-31
G = (wPixel & RGB555_MASK_GREEN) >> 5; // 取值范围0-31
B = wPixel & RGB555_MASK_BLUE; // 取值范围0-31

然后通过 RGB 的取值在索引表中得到真实的颜色。
索引颜色是一种位图图像的编码方法。当真彩色图片转换为索引颜色的图片时,如果原图颜色不在索引颜色中,计算机会从索引颜色中选出一个相近的颜色来模拟该颜色(抖动到相近的颜色),这也是早期浏览器存在 web 安全色的原因。要了解 web 安全色 的历史,可以戳这里

对于 RGB24 使用24位表示一个像素,RGB分量都用8位表示,取值范围为0-255。RGB32 则多了一个8位的 alpha 通道来表示透明度,可以使用RGBQUAD数据结构来操作一个像素:

typedef struct tagRGBQUAD {
BYTE rgbBlue; // 蓝色分量
BYTE rgbGreen; // 绿色分量
BYTE rgbRed; // 红色分量
BYTE rgbReserved; // 保留字节(用作Alpha通道或忽略)
} RGBQUAD。

显然,对于 RGB24 和 RGB32 ,每个通道都使用8位表示,即每个通道有256中不同的色彩深度。那么,如果每个通道使用16位甚至32位来表示,那就用有更多的颜色深度了。包含 32 位/通道的图像也称作高动态范围(HDR)图像

查看 CGBitmapContextCreate 的函数定义:

CG_EXTERN CGContextRef __nullable CGBitmapContextCreate(void * __nullable data,
    size_t width, size_t height, size_t bitsPerComponent, size_t bytesPerRow,
    CGColorSpaceRef cg_nullable space, uint32_t bitmapInfo)
    CG_AVAILABLE_STARTING(__MAC_10_0, __IPHONE_2_0);

Create a bitmap context. The context draws into a bitmap which is width pixels wide and height pixels high. The number of components for each pixel is specified by space, which may also specify a destination color profile. The number of bits for each component of a pixel is specified by bitsPerComponent. The number of bytes per pixel is equal to (bitsPerComponent * number of components + 7)/8. Each row of the bitmap consists of bytesPerRow bytes, which must be at least width * bytes per pixel bytes; in addition, bytesPerRow must be an integer multiple of the number of bytes per pixel. data, if non-NULL, points to a block of memory at least bytesPerRow * height bytes. If data is NULL, the data for context is allocated automatically and freed when the context is deallocated. bitmapInfo specifies whether the bitmap should contain an alpha channel and how it’s to be generated, along with whether the components are floating-point or integer.

翻译如下:

创建一个位图 context,位图的像素通过 width、hight 指定。每一个像素的颜色个数(number of components 通道数)通过 space 指定,也可以通过一个颜色描述文件来指定。每像素中每个颜色占用的位空间(bit)通过 bitsPerComponent 参数指定。每个像素的字节数(bytes per pixel)通过公式 (bitsPerComponent * number of components + 7)/8 计算(这个加7应该是为了位对齐)。位图的每一行包含 bytesPerRow 字节,其最少需要 width * bytes per pixel 字节;此外,bytesPerRow 必须是 bytes per pixel 的整数倍。data 如果不为空,其指向一个至少 bytesPerRow * height 字节的内存空间。若 data 为空,context 的 data 会随着该 context 自动创建和销毁。bitmapInfo 指出该位图是否包含 alpha 通道和它是如何产生的(RGB/RGBA/RGBX…),还有每个通道应该用整数标识还是浮点数。

关于 decodedImageWithImage 方法

在我们使用 UIImage 的时候,创建的图片通常不会直接加载到内存,而是在渲染的时候再进行解压并加载到内存。这就会导致 UIImage 在渲染的时候效率上不是那么高效。为了提高效率通过 decodedImageWithImage 方法把图片提前解压加载到内存,这样这张新图片就不再需要重复解压了,提高了渲染效率。这是一种空间换时间的做法。

在UI渲染的时候,实际上是把多个图层按像素叠加计算的过程,需要对每一个像素进行 RGBA 的叠加计算。当某个 layer 的是不透明的,也就是 opaque 为 YES 时,GPU 可以直接忽略掉其下方的图层,这就减少了很多工作量。这也是调用 CGBitmapContextCreate 时 bitmapInfo 参数设置为忽略掉 alpha 通道的原因。

转发自: http://honglu.me/2016/09/02/一张图片引发的深思/?utm_source=tuicool&utm_medium=referral

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,542评论 6 504
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,822评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,912评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,449评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,500评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,370评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,193评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,074评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,505评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,722评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,841评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,569评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,168评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,783评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,918评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,962评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,781评论 2 354

推荐阅读更多精彩内容

  • BMP文件格式,又称为Bitmap(位图)或是DIB(Device-Independent Device,设备无关...
    我是嘻哈大哥阅读 4,718评论 0 1
  • 转载请带上出处, 谢谢. 一个 Graphics Context 代表一个绘制目标, 它包含绘制系统用于完成绘制指...
    Falme丶阅读 1,796评论 0 2
  • 步入研究僧阶段已经有两月有余了,无论是思想上还是情感上都想找个地方宣泄一下。 作为一个信奉「生命在于折腾」的程序员...
    盖盖背着超人飞阅读 219评论 0 1
  • 今日通过阅读《最重要的两小时》这本书,让我印象深刻的是,其一,在打算专注做事的时候脑袋会走神,做白日梦等现象都是正...
    林子Amy阅读 127评论 0 0
  • 文/居里社 四季牌阵 1,权杖王后:尊贵如你,在这一季拥有着强大的力量,高贵,坚定,权杖王后代表坚强的有力量的人,...
    居里叶阅读 2,383评论 0 2