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
作者:夢陽