# 1-前言

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

上面這張手機鎖屏後精美的圖文，是不是看起來很美？

這些鎖屏圖片是手機自帶的。有時候我們愛好攝影的同學自己拍了美美的照片，是不是也想加上圖文作為鎖屏圖片呢？

我們HMS Core提供的圖文智慧排版能力，就可以實現這個功能，讓使用者直接在手機上就能體驗自己拍攝的精美圖片透過圖文只能排版製作成精美的雜誌鎖屏圖片。

# 2-場景
參考當前經典的圖片文字排版，HMS Core圖文智慧排版當前提供了9種文字排版樣式，開發者可以使用快速簡單地整合這個能力，提供給攝影愛好者以及圖文編輯者在攝影圖片上新增精緻排版過的文字，圖文並茂的圖片既可以用來記錄生活中的經典時刻，也可以用來作為鎖屏的圖片。

# 3-整合關鍵步驟說明和程式碼
### 開發準備
1-配置華為Maven倉地址

開啟AndroidStudio專案中的build.gradle檔案

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

在“buildscript > repositories”和“allprojects > repositories”中增加SDK的Maven倉地址：

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

2-新增編譯SDK依賴

開啟應用級的“build.gradle”檔案

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210128095642973.png#pic_center)

在dependencies中新增圖形引擎的SDK包，使用Full-SDK，以及AR Engine的SDK包

```java
dependencies {
….
   implementation "com.huawei.hms:image-vision:1.0.3.301"
   implementation "com.huawei.hms:image-vision-fallback:1.0.3.301"
}
```

3-在AndroidManifest.xml中新增許可權

開啟main中的AndroidManifest.xml檔案，在<application>

```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>
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"></uses-permission>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"></uses-permission>
```

# 開發步驟
1-   Layout
如下是需要輸入的內容，用於圖文智慧展示的文字：

1. title:  文案標題，必填欄位，不超過7箇中文漢字（總字元數量不超過10個），如果超過字數限制會被強制截斷。

2. description： 文案內容，不超過44箇中文漢字（總字元數量不超過66個），超過字數限制則進行截斷，用‘…’代替

3. copyRight： 圖片版權歸屬的個人/公司名稱，建議不超過7箇中文漢字（總字元數量不超過10個），超過字數限制則進行截斷，用‘…’代替。

4. anchor:“詳情”或“檢視更多”，建議4箇中文漢字（總字元數不超過6個）超過字數限制則進行截斷，用‘…’代替。

5. info： info1-info9的排版可以選擇其中一個，備註info8為豎板排版，當前僅支援中文版式，不支援其他語言版式；info3為預設兜底版式；若使用者輸入info8且輸入標籤、文字描述有非中文語種，返回使用者info3版式。

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

按鈕部分功能：

INIT_SERVICE對應服務初始化，

SOTP_SERVICE 停止服務

IMAGE 選擇開啟手機上的圖片

GET_RESULT: 獲取展示的排版後圖片

2-   INIT_SERVICE-服務初始化
服務初始化，呼叫setVisionCallBack時需要實現ImageVision.VisionCallBack介面，重寫其中的onSuccess(int successCode)和onFailure(int errorCode)方法。框架初始化成功後會回撥onSuccess方法，在onSuccess方法中，需要再初始化圖文智慧排版服務。

```java
1.  private void initTag(final Context context) {

2.  // 獲取ImageVisionImpl 物件

3.      imageVisionTagAPI = ImageVision.getInstance(this);

4.      imageVisionTagAPI.setVisionCallBack(new ImageVision.VisionCallBack() {

5.          @Override

6.          public void onSuccess(int successCode) {

7.              int initCode = imageVisionTagAPI.init(context, authJson);

8.          }

9.

10.         @Override

11.         public void onFailure(int errorCode) {

12.             LogsUtil.e(TAG, "getImageVisionAPI failure, errorCode = " + errorCode);

13.         }

14.     });

15. }  
```

其中authJson的格式參考如下連結

[https://developer.huawei.com/consumer/cn/doc/development/HMSCore-Guides/vision-service-dev_filter-0000001054127298](https://developer.huawei.com/consumer/cn/doc/development/HMSCore-Guides/vision-service-dev_filter-0000001054127298)

token為必選值，token的獲取方式參考如下連結

[https://developer.huawei.com/consumer/cn/doc/development/HMSCore-Guides-V5/get_token-0000001055139693-V5](https://developer.huawei.com/consumer/cn/doc/development/HMSCore-Guides-V5/get_token-0000001055139693-V5)

```java
1.  /**

2.   * Gets token.

3.   *

4.   * @param context the context

5.   * @param client_id the client id

6.   * @param client_secret the client secret

7.   * @return the token

8.   */

9.  public static String getToken(Context context, String client_id, String client_secret) {

10.     String token = "";

11.     try {

12.         String body = "grant_type=client_credentials&client_id=" + client_id + "&client_secret=" + client_secret;

13.         token = commonHttpsRequest(context, body, context.getResources().getString(R.string.urlToken));

14.         if (token != null && token.contains(" ")) {

15.             token = token.replaceAll(" ", "+");

16.             token = URLEncoder.encode(token, "UTF-8");

17.         }

18.     } catch (UnsupportedEncodingException e) {

19.         LogsUtil.e(TAG, e.getMessage());

20.     }

21.     return token;

22. }  
```

3-   Image-開啟手機本地圖片：

```java
1.  public static void getByAlbum(Activity act) {

2.      Intent getAlbum = new Intent(Intent.ACTION_GET_CONTENT);

3.      String[] mimeTypes = {"image/jpeg", "image/png", "image/webp"};

4.      getAlbum.putExtra(Intent.EXTRA_MIME_TYPES, mimeTypes);

5.      getAlbum.setType("image/*");

6.      getAlbum.addCategory(Intent.CATEGORY_OPENABLE);

7.      act.startActivityForResult(getAlbum, 801);

8.  }  
```

```java
1.  /**

2.       * Process the obtained image.

3.       */

4.      @Override

5.      public void onActivityResult(int requestCode, int resultCode, Intent data) {

6.          super.onActivityResult(requestCode, resultCode, data);

7.          if (data != null) {

8.              if (resultCode == Activity.RESULT_OK) {

9.                  switch (requestCode) {

10.                     case 801:

11.                         try {

12.                             imageBitmap = Utility.getBitmapFromUri(data, this);

13.                             iv.setImageBitmap(imageBitmap);

14.                             break;

15.                         } catch (Exception e) {

16.                             LogsUtil.e(TAG, "Exception: " + e.getMessage());

17.                         }

18.                 }

19.             }

20.         }

21.     }  
```

4-   GET_RESULT-獲取展示的排版後圖片
1-      構建引數物件

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

對應requestJson程式碼：

```java
1.  /*

2.      title: 文案標題

3.      description：文案內容

4.      copyRight：圖片版權歸屬的個人/公司名稱

5.      anchor:“詳情”或“檢視更多”

6.      info： info1-info9的排版可以選擇其中一個

7.   */

8.

9.  private void createRequestJson(String title, String description, String copyRight, String anchor, String info) {

10.     try {

11.         JSONObject taskJson = new JSONObject();

12.         taskJson.put("title", title);

13.         taskJson.put("imageUrl", "imageUrl");

14.         taskJson.put("description", description);

15.         taskJson.put("copyRight", copyRight);

16.         taskJson.put("isNeedMask", false);

17.         taskJson.put("anchor", anchor);

18.         JSONArray jsonArray = new JSONArray();

19.         if (info != null && info.length() > 0) {

20.             String[] split = info.split(",");

21.             for (int i = 0; i < split.length; i++) {

22.                 jsonArray.put(split[i]);

23.             }

24.         } else {

25.             jsonArray.put("info8");

26.         }

27.         taskJson.put("styleList", jsonArray);

28.         requestJson.put("requestId", "");

29.         requestJson.put("taskJson", taskJson);

30.         requestJson.put("authJson", authJson);

31.

32.         Log.d(TAG, "createRequestJson: "+requestJson);

33.     } catch (JSONException e) {

34.         LogsUtil.e(TAG, e.getMessage());

35.     }

36. }  
```

2-   展示部分程式碼

圖文智慧排版服務需要聯網從HMS Core雲端獲取展示樣式，如不聯網，則預設反回info3樣式

```java
1.  private void layoutAdd(String title, String info, String description, String copyRight, String anchor) {

2.      if (imageBitmap == null) {

3.          return;

4.      }

5.      final Bitmap reBitmap = this.imageBitmap;

6.      new Thread(new Runnable() {

7.          @Override

8.          public void run() {

9.              try {

10.                 token = Utility.getToken(context, client_id, client_secret);

11.                 authJson.put("token", token);

12.                 createRequestJson(title, description, copyRight, anchor, info);

13.                 final ImageLayoutInfo imageLayoutInfo = imageVisionLayoutAPI.analyzeImageLayout(requestJson,  reBitmap);

14.                 runOnUiThread(new Runnable() {

15.                     @Override

16.                     public void run() {

17.                         iv.setImageBitmap(null);

18.                         Bitmap resizebitmap = Bitmap.createScaledBitmap(Utility.cutSmartLayoutImage(reBitmap), width, height, false);

19.                         img_btn.setBackground(new BitmapDrawable(getResources(), resizebitmap));

20.                         setView(imageLayoutInfo);

21.                         viewSaveToImage(show_image_view);

22.                     }

23.                 });

24.             } catch (JSONException e) {

25.                 LogsUtil.e(TAG, "JSONException" + e.getMessage());

26.             }

27.         }

28.     }).start();

29.

30. }  
```

5-   SOTP_SERVICE 停止服務
當不再需要圖文智慧排版效果時，呼叫該介面停止服務，stopCode為0時，執行成功。

```java
1.  private void stopFilter() {

2.          if (null != imageVisionLayoutAPI) {

3.              int stopCode = imageVisionLayoutAPI.stop();

4.              tv2.setText("stopCode:" + stopCode);

5.              iv.setImageBitmap(null);

6.              imageBitmap = null;

7.              stopCodeState = stopCode;

8.              tv.setText("");

9.              imageVisionLayoutAPI = null;

10.         } else {

11.             tv2.setText("The service has not been enabled.");

12.             stopCodeState = 0;

13.         }

14.     }  
```

# 4-效果展示
開啟App點選下面的INIT_SERVICE按鈕，初始化服務；成功後點選IMAGE按鈕選擇本地拍攝的圖片；然後點選GET_RESULT獲取智慧圖文排版後的精美圖片

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

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

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

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

# 5-原始碼

參與開發者討論請到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/topic/0202441824310590439?fid=18](https://developer.huawei.com/consumer/cn/forum/topic/0202441824310590439?fid=18)

原作者：胡椒</application>

借用圖文智慧排版製作精美的鎖屏圖片

相關文章