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

## 2、功能演示和示例程式碼
![](http://img.blog.itpub.net/blog/2020/10/26/7fb069117f306a10.gif?x-oss-process=style/bb)

如果你對實現方式感興趣，可以去Github去下載原始碼，可以基於具體應用場景最佳化。

Github demo下載地址：[https://github.com/HMS-Core/hms-image-vision](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
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201026163513830.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

**步驟3**：選擇“File > Open > 示例工程解壓路徑”，點選“OK”

**步驟4**：新增HUAWEI agcp外掛、配置倉庫、依賴包、混淆指令碼、許可權（示例程式碼中已經配好，但後續你的工程需要參考配置）

1.在專案級“build.gradle”中配置maven倉庫路徑及HUAWEI agcp外掛

- 在“allprojects > repositories”裡面配置HMS SDK的maven倉地址

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

- 在“buildscript > repositories”裡面配置HMS SDK的maven倉地址

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

- 在“buildscript > dependencies”裡面增加配置

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

```

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

- 在“dependencies”中新增依賴包

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

- 配置minSdkVersion

```java
android { 
     ... 
     defaultConfig { 
         ... 
         minSdkVersion 26 
         ... 
     } 
     ... 
 }
```

- 在檔案頭新增配置

```java
apply plugin: 'com.huawei.agconnect'
```

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

3.配置混淆指令碼

- 在“app/proguard-rules.pro”檔案中配置

```java
-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白名單

```java
"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”檔案中配置許可權

```java
<uses-permission android:name="android.permission.INTERNET"></uses-permission> 
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"></uses-permission> 
 <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"></uses-permission>
```
**步驟5**：選擇Android Studio的“File > Sync Project with Gradle Files”，同步工程。

## 4.在“AndroidManifest.xml”檔案中配置許可權
步驟1：新建一個Activity，匯入服務包。

```java
public class ImageKitVisionDemoActivity extends AppCompatActivity implements View.OnClickListener
```
導包

```java
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佈局檔案

定義有按鈕和文字編輯佈局：

```java
<edittext android:id="@+id/btn_filter" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="filterType(0-24)"></edittext>
  
<button android:id="@+id/btn_init" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Init_Service"></button>
```

**步驟3**：在ImageKitVisionDemoActivity中定義變數，在onCreate方法中關聯變數與activity_main.xml中按鈕和文字編輯佈局

```java
//定義文字編輯和按鈕
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方法，定義每個點選事件呼叫的方法，示例：

```java
@Override
 public void onClick(View v) {
     switch (v.getId()) {
         case R.id.btn_init:
             initFilter(context);
             break;
     }
 }
```
**步驟5**：獲取服務例項：該步驟主要是獲取濾鏡服務例項，例如，獲取濾鏡效果圖等，寫在上述監聽點選事件中initFilter方法中。

```java
// 獲取ImageVisionImpl 物件 
 ImageVisionImpl imageVisionAPI = ImageVision.getInstance(this);
```
**步驟6**：服務初始化，寫在上述監聽點選事件中initFilter方法中

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

```java
imageVisionAPI.setVisionCallBack(new ImageVision.VisionCallBack() { 
     @Override 
     public void onSuccess(int successCode) { 
     imageVisionAPI.init(context, authJson); 
        ... 
     } 
     @Override 
     public void onFailure(int errorCode) { 
         ... 
     } 
 });
```
入參authJson：
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201026164019591.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

說明：以上引數除了token之外，都可在agconnect-services.json檔案中查詢(參考開發指南)。因安全問題，示例程式碼中未顯示真實鑑權資訊，你在開發時需填寫真實的鑑權資訊。

**步驟7**：構建引數物件requestJson。

入參requestJson和imageBitmap：        
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201026164145276.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

requestJson欄位資訊：   
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201026164159830.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

taskJson欄位資訊：  
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201026164210432.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

filterType對映表：       
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/2020102616422164.png#pic_center)
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201026164232598.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

requestJson 示例：

**步驟8**：獲取渲染圖。定義一個按鈕，監聽點選事件，透過點選事件呼叫介面，注意：調取介面時，需要開啟一個子執行緒去執行，不能在主執行緒執行。

ImageVisionResult返回值：       
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201026164247200.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

response欄位資訊：      
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201026164258835.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

**步驟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/hms)

獲取開發指導文件：[https://developer.huawei.com/consumer/en/doc/development](https://developer.huawei.com/consumer/en/doc/development)

參與開發者討論請到Reddit社群：[https://www.reddit.com/r/HMSCore/](https://www.reddit.com/r/HMSCore/)

下載demo和示例程式碼請到Github：[https://github.com/HMS-Core](https://github.com/HMS-Core)

解決整合問題請到Stack Overflow：[https://stackoverflow.com/questions/tagged/huawei-mobile-services?tab=Newest](https://stackoverflow.com/questions/tagged/huawei-mobile-services?tab=Newest)

---
原文連結：[https://developer.huawei.com/consumer/cn/forum/topicview?tid=0203351141059660527&fid=18](https://developer.huawei.com/consumer/cn/forum/topicview?tid=0203351141059660527&fid=18)
作者：夢陽

如何用華為影像服務快速實現濾鏡功能

相關文章