How to quickly realize the filter function with Huawei image service

1. Introduction

With the increasingly powerful function of mobile phone photographing, photographing and repairing pictures have become the necessary skills of each of us. The so-called "taking pictures for five minutes and repairing pictures for two hours" has also become a social tool for many young people. Therefore, filters and map modification have become essential functions in many social apps. So, how to add a filter function to your APP? You can access HUAWEI Image Kit and provide 24 color filters for image optimization to help you quickly realize the filter function.

2. Function demonstration and sample code

If you are interested in the implementation method, you can go to Github to download the source code and optimize it based on specific application scenarios.

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

3. Preparatory work

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 signing certificate
  • Generate signature certificate thumbprint
  • Configure signing certificate thumbprint
  • Add the app package name and save the configuration file
  • Configure Maven warehouse address and AppGallery Connect gradle plug-in
  • Configuring signature files in Android Studio

Please follow the detailed instructions in HUAWEI HMS Core integration preparation for specific operations.

Step 2: open Android Studio

Step 3: select "File > Open > sample project decompression path" and click "OK"

Step 4: add HUAWEI agcp plug-in, configure warehouse, dependency package, obfuscation script and permission (it has been configured in the sample code, but your subsequent projects need to refer to the configuration)

1. Configure maven warehouse Path and HUAWEI agcp plug-in in 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 the dependency package in the application level "build.gradle"

  • Add dependent packages in "dependencies"
dependencies { 
     ... 
             implementation 'com.huawei.hms:image-vision:1.0.2.301' 
     ... 
 }
  • Configure minSdkVersion
android { 
     ... 
     defaultConfig { 
         ... 
         minSdkVersion 26 
         ... 
     } 
     ... 
 }
  • Add configuration in file header
apply plugin: 'com.huawei.agconnect'

Description: apply plugin: 'com huawei. Agconnect 'needs to be in the apply plugin:' com android. Configure after 'application'.

3. Configure obfuscation 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 developers use AndResGuard, they need to add AndResGuard whitelist to the confusion 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 package.

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 in the method_ main. XML layout: setContentView(R.layout.activity_filter);

Step 2: create a new activity_main.xml layout file

Layout with buttons and text editing defined:

<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 and associate variables with activities in onCreate method_ main. Button and text editing layout in XML

//Define text editing and buttons
private EditText btn_filter;
private Button btn_init;
//Associate the text editing variable and the text editing box in the layout through the layout id
btn_filter = findViewById(R.id.btn_filter);
//Associate the button variable with the button in the layout through the layout id
btn_init = findViewById(R.id.btn_init);
//Set button listening events
btn_init.setOnClickListener(this);

Step 4: rewrite the onClick method and define the method 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 service instance: this step is mainly to obtain the filter service instance, for example, obtain the filter effect picture, which is written in the initFilter method in the above listening click event.

// Get ImageVisionImpl object 
 ImageVisionImpl imageVisionAPI = ImageVision.getInstance(this);

Step 6: initialize the service and write it in the initFilter method of the above listening click event

When calling setVisionCallBack, you need 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 initialization fails, the onFailure method will be called back and the failure error code will be returned. When calling the initialization interface, only through verification can the third-party application use the scene intelligent design service, 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) { 
         ... 
     } 
 });

Refer to authjason:

Note: except for token, the above parameters can be found in agconnect services JSON file (refer to the Development Guide). Due to security problems, the real authentication information is not displayed in the sample code. You need to fill in the real authentication information during development.

Step 7: build the parameter object requestjason.

Enter the parameters requestjason and imageBitmap:

requestJson field information:

Taskjason field information:

filterType mapping table:

Requestjason example:

Step 8: get the rendered image. Define a button to listen to click events and call the interface by clicking events. Note: when calling the interface, you need to start a sub thread to execute, which cannot be executed in the main thread.

ImageVisionResult return value:

response field information:

Step 9: stop the service.

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

5. Conclusion

So far, we have completed the development of filter function. It doesn't take much time to add filter function to the APP with the help of HMS Image Kit. So far, we have completed the development of filter function. With the help of HMS ImageKit, we can add filter function to the APP only by calling the filter interface, which is simple and easy to use. These 24 filters will also bring more choices and good experience to users.

For more details, see:

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 the developer discussion, please go to Reddit community: https://www.reddit.com/r/HMSCore/

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

To solve the integration problem, 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

Tags: Android

Posted by ripcurlksm on Tue, 10 May 2022 06:59:19 +0300