How to quickly implement the filter function with Huawei Image Service

1 Introduction

With the increasingly powerful camera functions of mobile phones, taking photos and retouching photos has become an essential skill for each of us. The so-called "five minutes to take photos and two hours to retouch" good-looking pictures have also become social tools for many young people. Therefore, filters and photo editing have become essential functions in many social apps. So, how to add a filter function to your APP? It can be connected to HUAWEI Image Kit, providing 24 color filters for image optimization, helping you quickly realize the filter function.

2. Function demonstration and sample code

If you are interested in the implementation, you can go to Github to download the source code, which can be optimized based on specific application scenarios.

Github demo download address:https://github.com/HMS-Core/hms-image-vision

3. Preparation

Step 1 : Configure AppGallery Connect

To integrate HUAWEI HMS Core capabilities, the following preparations need to be completed:

• Register as a Huawei developer

• Create AppGallery Connect app

• Create Android Studio project

• Generate signed certificate

• Generate signature certificate fingerprint

• Configure signing certificate fingerprint

• Add application package name and save configuration file

• Configure Maven warehouse address and AppGallery Connect gradle plugin

• Configure the signature file in Android Studio

For specific operations, please follow the detailed instructions in the "Preparation for HUAWEI HMS Core Integration" to complete.

Step 2 : Open Android Studio

Step 3 : Select "File> Open> Sample Project Decompression Path" and click "OK"

Step 4 : Add the HUAWEI agcp plug-in, configuration repository, dependency package, obfuscated script, permissions (the sample code is already configured, but you need to refer to the configuration for subsequent projects)

1. Configure the maven repository path and HUAWEI agcp plugin in the project-level "build.gradle"

• Configure the maven repository address of HMS SDK in "allprojects> repositories"

allprojects {      
     repositories { 
          maven { url 'https://developer.huawei.com/repo/' } 
          … 
     } 
  }

• Configure the maven repository address of HMS SDK in "buildscript> repositories"

buildscript { 
      repositories { 
          maven {url 'https://developer.huawei.com/repo/'} 
          … 
      } 
      … 
 }

• Add configuration in "buildscript> dependencies"

buildscript{ 
     dependencies { 
         classpath 'com.huawei.agconnect:agcp:1.3.1.300' 
     } 
 }

2. Configure dependent packages in the application-level "build.gradle"

• Add dependency packages in "dependencies"

dependencies { 
     … 
             implementation 'com.huawei.hms:image-vision:1.0.2.301' 
     … 
 }

• Configure minSdkVersion

android { 
     ... 
     defaultConfig { 
         ... 
         minSdkVersion 26 
         ... 
     } 
     ... 
 }

• Add configuration to the file header

apply plugin: 'com.huawei.agconnect'

Note: apply plugin:'com.huawei.agconnect' needs to be configured after apply plugin:'com.android.application'.

3. Configure obfuscated script

• Configure in the "app/proguard-rules.pro" file

-ignorewarnings 
 -keepattributes *Annotation* 
 -keepattributes Exceptions 
 -keepattributes InnerClasses 
 -keepattributes Signature 
 -keepattributes SourceFile,LineNumberTable 
 -keep class com.hianalytics.android.**{*;} 
 -keep class com.huawei.updatesdk.**{*;} 
 -keep class com.huawei.hms.**{*;}

• If the developer uses AndResGuard, you need to add the AndResGuard whitelist in the obfuscated configuration file

"R.string.hms*", 
 "R.string.connect_server_fail_prompt_toast", 
 "R.string.getting_message_fail_prompt_toast", 
 "R.string.no_available_network_prompt_toast", 
 "R.string.third_app_*", 
 "R.string.upsdk_*", 
 "R.layout.hms*", 
 "R.layout.upsdk_*",  
 "R.drawable.upsdk*", 
 "R.color.upsdk*",  
 "R.dimen.upsdk*", 
 "R.style.upsdk*", 
 "R.string.agc*"

4. Configure permissions in the "AndroidManifest.xml" file

<uses-permission android:name="android.permission.INTERNET"/> 
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
 <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

Step 5 : Select "File> Sync Project with Gradle Files" in Android Studio to synchronize the project.

4. Configure permissions in the "AndroidManifest.xml" file

Step 1: Create a new Activity and import the service pack.

public class ImageKitVisionDemoActivity extends AppCompatActivity implements View.OnClickListener

Guide package

import com.huawei.hms.image.vision.*; 
 import com.huawei.hms.image.vision.bean.ImageVisionResult;

Implement the onCreate method and associate the activity_main.xml layout in the method: setContentView(R.layout.activity_filter);

Step 2 : Create a new activity_main.xml layout file

Define button and text editing layout:

<EditText
     android:id="@+id/btn_filter"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:hint="filterType(0-24)" />

<Button
     android:id="@+id/btn_init"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Init_Service" />

Step 3 : Define variables in ImageKitVisionDemoActivity, associate the variables in the onCreate method with the button and text editing layout in activity_main.xml

//定义文本编辑和按钮
private EditText btn_filter;
private Button btn_init;
//通过布局id，关联文本编辑变量和布局中文本编辑框
btn_filter = findViewById(R.id.btn_filter);
//通过布局id，关联按钮变量和布局中按钮
btn_init = findViewById(R.id.btn_init);
//设置按钮监听事件
btn_init.setOnClickListener(this);

Step 4 : Rewrite the onClick method and define the method to be called by each click event. Example:

@Override
 public void onClick(View v) {
     switch (v.getId()) {
         case R.id.btn_init:
             initFilter(context);
             break;
     }
 }

Step 5 : Obtain a service instance: This step is mainly to obtain a filter service instance, for example, obtain a filter rendering, etc., written in the initFilter method in the above monitoring click event.

// 获取ImageVisionImpl 对象 
 ImageVisionImpl imageVisionAPI = ImageVision.getInstance(this);

Step 6 : Service initialization, written in the initFilter method in the above monitoring click event

When calling setVisionCallBack, it is necessary to implement the VisionCallBack interface of ImageVision, and override the onSuccess (ImageVisionImpl imageVision) and onFailure (int errorCode) methods. When the framework is initialized successfully, the onSuccess method will be called back to initialize the filter service. When the initialization fails, the onFailure method will be called back and the failure error code will be returned. When the initialization interface is called, the third-party application can use the scene intelligent design service only through verification, and the initialization is successful.

imageVisionAPI.setVisionCallBack(new ImageVision.VisionCallBack() { 
     @Override 
     public void onSuccess(int successCode) { 
     imageVisionAPI.init(context, authJson); 
        ... 
     } 
     @Override 
     public void onFailure(int errorCode) { 
         ... 
     } 
 });

Enter authJson:

Note: All the above parameters can be found in the agconnect-services.json file except token (refer to the development guide). Due to security issues, the real authentication information is not displayed in the sample code. You need to fill in the real authentication information during development.

Step 7 : Construct the parameter object requestJson.

Enter requestJson and imageBitmap:

requestJson field information:

taskJson field information:

filterType mapping table:

requestJson example:

Step 8 : Obtain a rendering image. Define a button, listen to the click event, and call the interface through the click event. Note: When calling the interface, you need to open a sub-thread to execute it, not the main thread.

ImageVisionResult return value:

Response field information:

Step 9 : Stop the service.

When the filter effect is no longer needed, call this interface to stop the service. When stopCode is 0, the execution is successful.

5. Conclusion

So far we have completed the development of the filter function. With the help of HMS Image Kit, it does not take too much time to add the filter function to the APP. So far we have completed the development of the filter function. With the help of HMS ImageKit, only need to call the filter interface to give the APP Add filter function, easy to use, these 24 filters will also give users more choices and a good experience.

For more details, please refer to:

Official website of Huawei Developer Alliance:https://developer.huawei.com/consumer/en/hms

Obtain development guidance documents:https://developer.huawei.com/consumer/en/doc/development

To participate in developer discussions, please go to the Reddit community:https://www.reddit.com/r/HMSCore/

To download the demo and sample code, please go to Github:https://github.com/HMS-Core

To solve integration problems, please go to Stack Overflow:https://stackoverflow.com/questions/tagged/huawei-mobile-services?tab=Newest

---

Original link:https://developer.huawei.com/consumer/cn/forum/topicview?tid=0203351141059660527&fid=18
Author: Meng Yang