4.10 给图片应用压缩/缩放/圆角/CoreImage滤镜/缓存 [iOS开发中的神兵利器]



1. 本节课将为您演示,在第三方类库中的,用来处理图片的一些强大的功能。首先确保已经安装了所需的第三方库。双击此处查看安装配置文件。


2. 根据配置文件中的相关设置,安装第三方库。安装完成之后,双击打开此处的项目文件。


3. 此时在我们的项目中,已经导入了几张等待处理的图片。


4. 接着打开视图控制器的代码文件。


5. 首先在当前的类文件中,引入已经安装的第三方类库。


6. 在此同时引入两个类库。


7. 添加一个方法,用来下载一张网络图片,并在模拟器中显示下载的图片。


8. 然后调用网络操作库的网络请求方法,下载指定的服务器接口,并返回一张图片。


9. 在控制台依次输出网络返回对象、网络请求对象、以及服务器返回的结果。


10. 获得服务器返回的图片,并在控制台输出图片信息。


11. 接着获得根视图的显示区域的尺寸。


12. 然后创建一个图像视图,用来显示下载的图片,并将图像视图放置在根视图的中心位置。


13. 将图像视图添加到根视图中。


14. 在视图加载完成的方法中,执行图片下载并显示的任务。接着点击左上角的[编译并运行]按钮,启动模拟器预览项目。


15. 此时在模拟器中,显示了一张下载的图片。点击此处的[停止]按钮,关闭模拟器。


16. 接着点击右侧的垂直滚动条,跳转到编辑区的底部位置。


17. 在此添加了另一个方法,用来膨胀和恢复被压缩图片的数据,可以明显提高图片的渲染效率。


18. 首先获得项目中的图片所在的路径。


19. 然后加载图片,并转换成数据格式。


20. 根据图片的数据,初始化一个图片对象。


21. 接着执行图片对象的扩展方法,实现对压缩图片的恢复。当图片较大时,最好新建一个线程以执行该方法。


22. 获得根视图的显示区域的尺寸。


23. 然后创建一个图像视图,用来显示处理后的图片。


24. 将图像视图放置在根视图的中心位置。


25. 将图像视图添加到根视图,接着点击右侧的垂直滚动条,跳转到编辑区的顶部位置。


26. 然后修改此处方法的名称。


27. 接着点击左上角的[编译并运行]按钮,启动模拟器预览项目。


28. 在弹出的模拟器中,显示了一张经过处理的图片。点击此处的[停止]按钮,关闭模拟器。


29. 点击右侧的垂直滚动条,跳转到编辑区的底部位置。


30. 接着我们将使用第三方类库的,用来实现图片缩放的功能。


31. 添加一个方法,用来实现图片的缩放。


32. 首先从项目中加载一张图片。


33. 初始化一个尺寸,作为缩放后的图片尺寸。


34. 调用图片对象的缩放方法,将图片缩小至指定的尺寸。


35. 获得根视图的矩形显示区域的尺寸。


36. 然后创建一个图像视图,用来显示缩放后的图片。


37. 将图像视图放置在根视图的中心位置,并将图像视图添加到根视图,接着点击右侧的垂直滚动条,跳转到编辑区的顶部位置。


38. 然后修改此处方法的名称。


39. 接着点击左上角的[编译并运行]按钮,启动模拟器预览项目。


40. 在弹出的模拟器中,显示了一张经过缩放的图片。点击此处的[停止]按钮,关闭模拟器。


41. 图片虽然被缩放至指定的尺寸,但是图片在垂直方向上已经被扭曲了。


42. 接着来修改图片的缩放样式。


43. 对图片执行缩放命令,该缩放将使宽度和高度进行等比例的变化。


44. 然后将缩放后的图片,指定给图像视图。接着点击左上角的[编译并运行]按钮,再次启动模拟器预览项目。


45. 此时图片已经被缩放至指定的尺寸,并且高度和宽度进行了等比例的变化。


46. 接着尝试图片的第三种缩放样式。


47. 此处的缩放样式,即可以保证图片宽度和高度的等比例变化,也可以尽可能的充满指定的尺寸。


48. 然后将缩放后的图片,指定给图像视图。接着点击左上角的[编译并运行]按钮,再次启动模拟器预览项目。


49. 此时图片已经被等比例缩放至指定的尺寸,并且充满了整个方形区域。点击此处的[停止]按钮,关闭模拟器。


50. 接着我们将使用第三方类库的,用来实现图片圆角的功能。


51. 添加一个方法,用来创建一个圆角图片。


52. 首先从项目中加载一张图片。


53. 接着设置圆角的半径大小。


54. 通过调用图片的扩展方法,对图片进行圆角处理。


55. 获得根视图的矩形显示区域的尺寸。


56. 然后创建一个图像视图,用来显示添加圆角之后的图片。


57. 将图像视图放置在根视图的中心位置。


58. 将图像视图添加到根视图,接着点击右侧的垂直滚动条,跳转到编辑区的顶部位置。


59. 然后修改此处方法的名称。


60. 接着点击左上角的[编译并运行]按钮,启动模拟器预览项目。


61. 在弹出的模拟器中,显示了一张添加圆角效果的图片。点击此处的[停止]按钮,关闭模拟器。


62. 接着点击右侧的垂直滚动条,跳转到编辑区的底部位置。


63. 现在对代码进行修改,使圆角效果进一步扩大,从而创建一个圆形图片。


64. 通过调用图片对象的圆角至圆形的方法,创建一个圆形图片。


65. 然后将添加圆角效果后的图片,指定给图像视图。接着再次启动模拟器预览项目。


66. 在弹出的模拟器中,显示了一张完美的圆形图片,经常被用于展示用户头像的缩略图。点击此处的[停止]按钮,关闭模拟器。


67. 继续使用第三方类库的另一个功能,给图片添加各种滤镜效果。


68. 添加一个方法,给图片添加棕褐色调的滤镜,从而制作老旧照片的效果。


69. 首先从项目中加载一张图片。


70. 接着给图片快速添加棕褐色调的滤镜。


71. 获得根视图的矩形显示区域的尺寸。


72. 然后创建一个图像视图,用来显示添加滤镜之后的图片。


73. 将图像视图放置在根视图的中心位置。


74. 将图像视图添加到根视图,接着点击右侧的垂直滚动条,跳转到编辑区的顶部位置。


75. 然后修改此处方法的名称。


76. 接着点击左上角的[编译并运行]按钮,启动模拟器预览项目。


77. 在弹出的模拟器中,显示了一张添加棕褐色调的图片。点击此处的[停止]按钮,关闭模拟器。


78. 点击右侧的垂直滚动条,跳转到编辑区的底部位置。


79. 接着将当前的滤镜效果,修改为模糊滤镜。


80. 设置模糊滤镜的类型为动态模糊,以及输入半径和输入角度两个参数。


81. 然后将添加模糊滤镜后的图片,指定给图像视图。接着再次启动模拟器预览项目。


82. 在弹出的模拟器中,显示了一张拥有动态模糊滤镜效果的图片。点击此处的[停止]按钮,关闭模拟器。


83. 最后演示一个很实用的功能,对下载的图片进行缓存处理。


84. 添加一个方法,用来实现网络图片的缓存。


85. 首先设置缓存区域的大小为100兆,当缓存内容超出100兆时,将自动清除缓存中的内容,直到缓存区域的剩余空间达到60兆时为止。


86. 接着创建一个网络请求对象,下载指定位置的网络图片。


87. 然后调用网络操作库的网络请求方法,下载指定位置的图片。


88. 将下载后的数据,转换成一张图片。


89. 接着将下载的图片进行缓存,并设置缓存图片的网络请求和标识符。


90. 当您需要再次下载位于同一网址的图片时,只需要指定它的网络请求和标识符,即可从缓存中加载该图片,而无需重复下载。


91. 然后创建一个图像视图,用来显示缓存之后的图片。


92. 将图像视图放置在根视图的中心位置,同时将图像视图添加到根视图。


93. 当不需要缓存某张图片时,只需要调用缓存对象的移除图片功能即可。接着点击右侧的垂直滚动条,跳转到编辑区的顶部位置。


94. 然后修改此处方法的名称。


95. 接着点击左上角的[编译并运行]按钮,启动模拟器预览项目。




本文整理自:《app开发中的神兵利器》,真正的[手把手]教学模式,用最快的速度上手iOS开发,苹果商店App Store免费下载:https://itunes.apple.com/cn/app/id1209739676,或扫描本页底部的二维码。课程配套素材下载地址:资料下载

0