Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:7Length:44 minutes
  • Overview
  • Transcript

3.2 Apply Image Filters

In this lesson, you’ll actually apply the five image filters you added in the previous lesson. You’ll also learn how to use the GPUImage library to save the modified photo to the device’s Environment.DIRECTORY_PICTURES.

Related Links

3.2 Apply Image Filters

Hello, and welcome back. In this lesson you are going to learn how to apply filters to a photo and then save it using the GPUImageView class. Let's start by overriding the onOptionsItemSelected method. This method is called every time the user presses the sale button or selects a filter option. Return true here because we want to consume the event. You're gonna first check if the selected item is the save button. So, check if item.getItemId is equal to R.id.menu_save. If this condition is true called a method called saveFile and generate the method. If this condition is false it means one of the filter options has been selected. So, get the id of the current item using getItemId again and pass it to a method called applyFilter. This method, too, doesn't exist yet, so create it. Now, the applyFilter method must run inside a different thread because image processing is a CPU intensive task and you don't want it to freeze the main thread. So, create a new thread and override its run method and call start immediately. Move the call to applyFilter from here to inside the run method. You'll have to make the id final for this to work. Inside the applyFilter method, create a switch statement for the id. And then let's add a case for the emboss filter first. To apply a filter using GPUImageView you must use the setFilter method and pass a new instance of the filter class you want. In this case, it is the GPUImageEmbossFilter class. You can pass an argument to this constructor but I'm gonna go with the default values. That's all we need to do here, so, say break. You must now repeat the same process for the remaining filters. So, the next filter will be grayscale filter. Call setFilter again but pass a new instance of the GPUImageGrayscaleFilter class, say break again. I hope you now understand how to apply filters. As you can see, the API of the GPU image library is very intuitive and easy to use. Most of these filters can take arguments and you are free to experiment with them. Now that we have added code to apply the filters all that remains to be done is add code to the saveFile method so that the modified photo can be saved in the external storage. So, first create a filename for the modified photo using the Util.getANewFilename method. To save the photo to the Pictures directory GPUImageView has a method called, saveToPictures. As the first argument you can specify the name of a subdirectory inside the Pictures directory where you want to save the photo. I'll say, MyCamera, here. As the next argument, pass the filename. As the last argument you can add an onPictureSaved listener. This listener lets you know when the save operation is complete. Here, let us just create short duration Toast method saying, Photo saved. And then call its show method to actually display the Toast. And now, FilterActivity should close and the user should be taken back to the main activity, that they can take more photos. Therefore, call the finish method. Our app is now complete. Let's run it to see how it behaves. So, when I click on the floating action button, a high resolution photo is captured and I'm taken to the next screen where I can apply filters. Let me try applying all the filters one after another. First grayscale, next sepia, then emboss, Toon and haze. Finally, I can press the save button to save the photo and return to the previous screen. You now know how to apply filters to photos. Thanks for watching.

Back to the top