如何用華爲圖像服務快速實現濾鏡功能

1、引言

隨着手機拍照功能日益強大,拍照和修圖成了我們每個人的必備技能,正所謂“拍照五分鐘,修圖兩小時”好看的圖片也成爲很多年輕人的社交工具。因此,濾鏡和修圖成了很多社交APP內必不可少的功能。那麼,如何給自己的APP添加一個濾鏡功能呢?可以接入HUAWEI Image Kit, 提供24款顏色濾鏡進行圖像優化,幫助你快速實現濾鏡功能。

2、功能演示和示例代碼

如果你對實現方式感興趣,可以去Github去下載源代碼,可以基於具體應用場景優化。

Github demo下載地址:https://github.com/HMS-Core/hms-image-vision

3、準備工作

步驟1:配置AppGallery Connect

集成HUAWEI HMS Core能力,需要完成以下準備工作:

  • 註冊成爲華爲開發者

  • 創建AppGallery Connect應用

  • 創建Android Studio工程

  • 生成簽名證書

  • 生成簽名證書指紋

  • 配置簽名證書指紋

  • 添加應用包名並保存配置文件

  • 配置Maven倉地址及AppGallery Connect gradle插件

  • 在Android Studio配置簽名文件

具體操作,請按照《HUAWEI HMS Core集成準備》中詳細說明來完成。

步驟2:打開Android Studio
在這裏插入圖片描述

步驟3:選擇“File > Open > 示例工程解壓路徑”,點擊“OK”

步驟4:添加HUAWEI agcp插件、配置倉庫、依賴包、混淆腳本、權限(示例代碼中已經配好,但後續你的工程需要參考配置)

1.在項目級“build.gradle”中配置maven倉庫路徑及HUAWEI agcp插件

  • 在“allprojects > repositories”裏面配置HMS SDK的maven倉地址
allprojects {      
     repositories { 
          maven { url 'https://developer.huawei.com/repo/' } 
          … 
     } 
  }
  • 在“buildscript > repositories”裏面配置HMS SDK的maven倉地址
buildscript { 
      repositories { 
          maven {url 'https://developer.huawei.com/repo/'} 
          … 
      } 
      … 
 }
  • 在“buildscript > dependencies”裏面增加配置
buildscript{ 
     dependencies { 
         classpath 'com.huawei.agconnect:agcp:1.3.1.300' 
     } 
 }

2.在應用級“build.gradle”中配置依賴包

  • 在“dependencies”中添加依賴包
dependencies { 
     … 
             implementation 'com.huawei.hms:image-vision:1.0.2.301' 
     … 
 }
  • 配置minSdkVersion
android { 
     ... 
     defaultConfig { 
         ... 
         minSdkVersion 26 
         ... 
     } 
     ... 
 }
  • 在文件頭添加配置
apply plugin: 'com.huawei.agconnect'

說明:apply plugin: 'com.huawei.agconnect'需要在apply plugin:'com.android.application'之後配置。

3.配置混淆腳本

  • 在“app/proguard-rules.pro”文件中配置
-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.**{*;}
  • 如果開發者使用了AndResGuard,需要在混淆配置文件中加入AndResGuard白名單
"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.在“AndroidManifest.xml”文件中配置權限

<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" />

步驟5:選擇Android Studio的“File > Sync Project with Gradle Files”,同步工程。

4.在“AndroidManifest.xml”文件中配置權限

步驟1:新建一個Activity,導入服務包。

public class ImageKitVisionDemoActivity extends AppCompatActivity implements View.OnClickListener

導包

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

實現onCreate方法,在方法裏關聯activity_main.xml佈局:setContentView(R.layout.activity_filter);

步驟2:新建一個activity_main.xml佈局文件

定義有按鈕和文本編輯佈局:

<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" />

步驟3:在ImageKitVisionDemoActivity中定義變量,在onCreate方法中關聯變量與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);

步驟4:重寫onClick方法,定義每個點擊事件調用的方法,示例:

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

步驟5:獲取服務實例:該步驟主要是獲取濾鏡服務實例,例如,獲取濾鏡效果圖等,寫在上述監聽點擊事件中initFilter方法中。

// 獲取ImageVisionImpl 對象 
 ImageVisionImpl imageVisionAPI = ImageVision.getInstance(this);

步驟6:服務初始化,寫在上述監聽點擊事件中initFilter方法中

調用setVisionCallBack時需要實現ImageVision的VisionCallBack接口,重寫其中的onSuccess(ImageVisionImpl imageVision)和onFailure(int errorCode)方法。初始化框架成功時會回調onSuccess方法,初始化濾鏡服務。初始化失敗時會回調onFailure方法,傳回失敗錯誤碼。調用初始化接口時,只有通過校驗,第三方應用才能使用場景智能設計服務,初始化成功。

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

入參authJson:
在這裏插入圖片描述

說明:以上參數除了token之外,都可在agconnect-services.json文件中查找(參考開發指南)。因安全問題,示例代碼中未顯示真實鑑權信息,你在開發時需填寫真實的鑑權信息。

步驟7:構建參數對象requestJson。

入參requestJson和imageBitmap:
在這裏插入圖片描述

requestJson字段信息:
在這裏插入圖片描述

taskJson字段信息:
在這裏插入圖片描述

filterType映射表:
在這裏插入圖片描述
在這裏插入圖片描述

requestJson 示例:

步驟8:獲取渲染圖。定義一個按鈕,監聽點擊事件,通過點擊事件調用接口,注意:調取接口時,需要開啓一個子線程去執行,不能在主線程執行。

ImageVisionResult返回值:
在這裏插入圖片描述

response字段信息:
在這裏插入圖片描述

步驟9:停止服務。

當不再需要濾鏡效果時,調用該接口停止服務,stopCode爲0時,執行成功。

5. 結束語

至此我們就已完成了濾鏡功能開發,藉助HMS Image Kit不需要花費太多時間就能給APP添加濾鏡功能至此我們濾鏡功能開發完成,藉助HMS ImageKit只需要調用濾鏡接口就可以給APP添加濾鏡功能,簡單易用,這24款濾鏡也會給用戶帶來更多的選擇和良好的體驗。

欲瞭解更多詳情,請參閱:

華爲開發者聯盟官網:https://developer.huawei.com/consumer/en/hms

獲取開發指導文檔:https://developer.huawei.com/consumer/en/doc/development

參與開發者討論請到Reddit社區:https://www.reddit.com/r/HMSCore/

下載demo和示例代碼請到Github:https://github.com/HMS-Core

解決集成問題請到Stack Overflow:https://stackoverflow.com/questions/tagged/huawei-mobile-services?tab=Newest


原文鏈接:https://developer.huawei.com/consumer/cn/forum/topicview?tid=0203351141059660527&fid=18
作者:夢陽

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章