iOS图片压缩处理
首先,我们必须明确图片的压缩其实是两个概念:
- “压” 是指文件体积变小,但是像素数不变,长宽尺寸不变,那么质量可能下降。
- “缩” 是指文件的尺寸变小,也就是像素数减少,而长宽尺寸变小,文件体积同样会减小。
图片“压”处理
对于“压”的功能,我们可以使用UIImageJPEGRepresentation
或UIImagePNGRepresentation
方法实现,如:
<code class="hljs fix has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-attribute" style="box-sizing: border-box;">NSData *imgData </span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;"> UIImageJPEGRepresentation(image, 0.5);</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
第一个参数是图片对象,第二个参数是压的系数,其值范围为0~1。
UIImageJPEGRepresentation
方法的官方注释是:return image as JPEG. May return nil if image has no CGImageRef or invalid bitmap format. compression is 0(most)..1(least)
关于PNG和JPEG格式压缩
-
UIImageJPEGRepresentation
函数需要两个参数:图片的引用和压缩系数而UIImagePNGRepresentation
只需要图片引用作为参数.
-
UIImagePNGRepresentation(UIImage \*image)
要比UIImageJPEGRepresentation(UIImage* image, 1.0)
返回的图片数据量大很多.
同样的一张照片, 使用UIImagePNGRepresentation(image)
返回的数据量大小为199K
,而 UIImageJPEGRepresentation(image, 1.0)
返回的数据量大小只为140K
,比前者少了59K
.
如果对图片的清晰度要求不是极高,建议使用UIImageJPEGRepresentation
,可以大幅度降低图片数据量.比如,刚才拍摄的图片,通过调用UIImageJPEGRepresentation(image, 1.0)
读取数据时,返回的数据大小为140K
,但更改压缩系数为0.5
再读取数据时,返回的数据大小只有11K
,大大压缩了图片的数据量,而且清晰度并没有相差多少,图片的质量并没有明显的降低。因此,在读取图片数据内容时,建议优先使用UIImageJPEGRepresentation
,并可根据自己的实际使用场景,设置压缩系数,进一步降低图片数据量大小。
提示:压缩系数不宜太低,通常是0.3~0.7,过小则可能会出现黑边等。
我们看一下笔者使用UIImageJPEGRepresentation
的数据表:
![image](http://www.henishuo.com/wp-content/uploads/2015/12/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7-2015-12-01-%E4%B8%8B%E5%8D%885.52.352.png)
笔者统计了iphone
设备上的全屏图和原始图在压缩前和压缩后的大小,我们需要根据图片压缩后在PC上的清晰度来决定最终选择哪个压缩系数。
图片“缩”处理
通过[sourceImage drawInRect:CGRectMake(0, 0, targetWidth, targetHeight)]
可以进行图片“缩”的功能。如下是笔者对图片尺寸缩的api
:
<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*!
* @author 黄仪标, 15-12-01 16:12:01
*
* 压缩图片至目标尺寸
*
* @param sourceImage 源图片
* @param targetWidth 图片最终尺寸的宽
*
* @return 返回按照源图片的宽、高比例压缩至目标宽、高的图片
*/</span>
- (<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIImage</span> *)compressImage:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIImage</span> *)sourceImage toTargetWidth:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span>)targetWidth {
<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGSize</span> imageSize = sourceImage<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.size</span>;
<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> width = imageSize<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.width</span>;
<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> height = imageSize<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.height</span>;
<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> targetHeight = (targetWidth / width) * height;
UIGraphicsBeginImageContext(CGSizeMake(targetWidth, targetHeight));
[sourceImage drawInRect:CGRectMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, targetWidth, targetHeight)];
<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIImage</span> *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> newImage;
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li></ul>
我们对图片只“压”而不缩,有时候是达不到我们的需求的。因此,适当地对图片“缩”一“缩“尺寸,就可以满足我们的需求。