Matrixzk’s Blog

keep moving

在 iOS 中展示 Base64 编码的图片

Jan 22nd, 2015

做网页前端的同学有时为了减少 Http 的请求数量，经常会把一些需要重复使用并且比较小的图片根据 Data URI 协议，经 base64 编码成字符串格式来储存。

背景知识

Data URI 的语法是这样的：

1

data:[<mediatype>][;base64],<data>

这里的 mediatype 是一个 MIME 类型的字符串，比如 image/png 表示 png 格式的图片文件。缺省时其默认值为 text/plain;charset=US-ASCII。当要表示的 data 不是文本时，比如图片、音频、视频文件等，需要对其进行 base64 编码。

举个栗子，用 Data URI 表示一张图片时，大概是这个样子 (这里的 ... 为省略的字符) ：

1

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbgAAACOCAYAAABDnh23JlYWR5ccllPAAAAy ... RK5CYII=

根据 base64 编码的原理，当看到一堆连续的字符后边跟一或两个 = 时，基本可以确定这是一个经过 base64 编码后得到的字符串。

在 html 中，像下边这样就可以将该图片显示出来了：

1

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbgAAACOCAYAAABDnh23JlYWR5ccllPAAAAy ... RK5CYII="/>

解决方案一

这里的 Data URI 也可视为是 URL，因此可将其转换为 NSURL ，然后将其转换为 NSData ，最后将其读出为 UIImage ：

1
2
3
4
5

// 这里的变量 dataURIStr 形如字符串 @"data:image/png;base64,iVBORw0KGgoAy ... RK5CYII="

NSURL   *imgURL  = [NSURL URLWithString:dataURIStr];
NSData  *imgData = [NSData dataWithContentsOfURL:imgURL];
UIImage *img     = [UIImage imageWithData:imgData];

此处注意：上述参数 dataURIStr 必须有协议前缀 data:image/png;base64,，否则就不是一个标准的 Data URI 了，得到的 imgURL 将会为 nil。

解决方案二

如果去掉上述协议前缀，剩下的字符串就是一个经 base64 编码后的图片信息，此时可用 iOS7 之后 NSData 新增加的方法 initWithBase64EncodedString: options: 来搞定。它可将 base64 编码的字符串直接转换为 NSData ：

1
2
3
4

// 这里的变量 base64ImgStr 形如字符串 @"iVBORw0KGgoAy ... RK5CYII="，即图片经 base64 编码后所得的字符串

NSData  *imgData = [[NSData alloc] initWithBase64EncodedString:base64ImgStr options:0];
UIImage *img     = [UIImage imageWithData:imgData];

参考链接

返回顶部