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

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

19. 然后读取指定名称的图片，并转换成数据格式。

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

32. 首先从项目中读取一张图片。

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

52. 首先从项目中读取一张图片。

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

69. 首先从项目中读取一张图片。

image

70. 接着给图片添加一款，可以让图片看起来比较陈旧的滤镜。

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

96. 在弹出的模拟器中，显示了一张在本地缓存之后的网络图片。最后点击此处的[停止]按钮，关闭模拟器。

image

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

apps8 2.png