How to Develop an Image Editing App with Image Kit? — Part 2
In our first part, we developed a simple photo animation app with Image Kit’s Image Render functionality. Now for our second part, we will learn about Image Vision and we are going to develop a simple photo filtering application.
✨ What is Image Vision Service?
Image Vision service is the second offering by Huawei’s Image Kit. Image Render is all about animations but Image Vision is about mostly editing. Image Vision service offers 5 different functionalities for now. These are Filter service, Smart Layout service, Theme Tagging service, Sticker service, Image Cropping service.
Filter service; offers 24 different color filters for image processing. We will use this service for our photo filtering application. Theme Tagging service provides a tagging function that supports tagging for images created by users as well as tagging for objects detected in images. Sticker service provides the sticker and text art function. It allows users to scale, drag, or delete stickers and text arts and customize the text of text arts. Image Cropping service provides the cropping and rotation function for users to resize images. Smart Layout service provides nine styles for smart image and text layout.
🚧 Development Process
Since we are developing a photo filtering application we are going to use Filter service and Image Cropping service.
First of all, we need to add our dependencies and be careful with the restrictions. You can check it out in the first part of this. We have already created an application added dependencies, created an app in AGC, created base activity in the first part.
Let’s start with initializing Image Vision API.
Init code must 0 when initialization is successful. After successful filtering doesn’t forget to stop the image vision service. Since we need to select images to filter. We are going to write a few functions for permissions and image selection activity.
When the user selects an image to filter we will handle it on onActivityResult. We will set this image to imageView and we will use a crop layout view for Image Cropping Service.
When our image is set, we are one step away from finishing. There are 24 different color filters provided by Filter Service. Image Vision will return a bitmap filtered by one of these 24 color filters.
We also need a task JSON object to use Image Vision Filter Service. You can the descriptions in these images.
We will use an edit text to change compress rate and intensity the same as filter type but you can use a horizontal recycler view. With a horizontal recycler view, you can display all filtered images at once. Our application’s filtering is done. Now we can develop our Image Cropping Service. It is a new feature of Image Vision. Thanks to this feature we can rotate or crop with just one line of code.
And here our final look.
As I told you before for better UI we can use a horizontal recycler view like this.
💡 Conclusion
Image Vision provides us five different services. In this part, we talked about Filter Service and Image Cropping Service. As you can see adding an image filtering function is easy as pie. You can combine other services for a better image processing function. Also, you can find the sample project GitHub repository below. In the next parts, we can talk about Image Vision’s other services.
