如何讓Android 支援HEIF 圖片解碼和載入(免費的方法)

七脈神劍發表於2021-06-06

位元組跳動火山引擎ImageX提供了一種能力,可以支援客戶端android 直接解碼HEIF 和HEIC圖片,經過測試發現,可以免費使用;

一、閱前準備

  • HEIF圖片格式是什麼?

高效率影像格式(High Efficiency Image Format ,HEIF)最早被蘋果公司的 iPhone 所使用,並且也將用於 Google 的 Android P 手機系統。微軟也於最新放出的 Windows 10 Build 17123 預覽版開始,新增了對 HEIF 影像格式的系統原生支援,所以系統極客將在本文中為大家簡介 HEIF 這一新興的高效率影像格式。

  • HEIF優於JPEG影像格式

高效率影像格式在各方面均優於 JPEG,通過使用更現代的壓縮演算法,它可以將相同數量的資料大小壓縮到 JPEG 影像檔案的 50% 左右。隨著手機 Camera 的不斷升級,照片的細節也日益增加。通過將照片儲存為 HEIF 格式而不非 JPEG,可以讓檔案大小減半,幾乎可以在同一部手機上儲存以前 2 倍的照片數量。如果一些雲服務也支援 HEIF 檔案,則上傳到線上服務的速度也會更快,並且使用更少的儲存空間。在 iPhone 上,這意味著您的照片應該會以以前兩倍的速度上傳到 iCloud 照片庫。

JPEG 標準可以追溯到 1992 年,JPEG 標準的最新版本也於 1994 年完成,JPEG 長期以來為我們提供了很好的服務,但現代(新)標準超越它並不是很奇怪。

  • HEIC唯一缺點:相容性

目前使用 HEIF 或 HEIC 照片唯一的缺點就是相容性問題。現在的軟體只要能夠檢視圖片,那它肯定就可以讀取 JPEG 影像,但如果你拍攝了以 HEIF 或 HEIC 副檔名結尾的圖片,並不是在所有地方和軟體中都可以正確識別。

這也是當我們將照片附加到電子郵件或在不支援 HEIF 檔案的服務中進行共享時, iPhone 和 iPad 會自動將其轉換為 JPEG 影像的原因。在使用 iTunes 將 HEIF 照片匯入 Windows PC 時,也會自動將它們轉換為 JPEG 格式。

雖然 Mac 從 macOS High Sierra 開始支援 .HEIF 和 .HEIC 檔案,但 Windows 10 從 Windows 10 Build 17123 預覽版才開始提供 HEIF 影像內建支援,所以對於老舊 Windows、macOS 和舊版 iOS 與 Android 使用者需要使用第三方影像檢視器或轉換軟體才能檢視 .HEIF 或 .HEIC 檔案。

那我們如何讓HEIF 支援全端Android 機型呢? 這裡提供了一種軟解碼實現方案,具體接入如下:

二、遇到了什麼問題

  • HEIF 圖片在iOS 11以上開始支援,但是在Android 系統支援 一直比較慢,而且有很多系統性的bug 會導致解碼失敗;所以我們乾脆實現一種軟解的方案;

  • HEIF 使用自研的解碼能力,發現使用HEIF 圖片載入整體體積降低 50%+,使用者載入更快!

  • 針對線上圖片效能、圖片進行可用性、網路耗時的監控,全面感知客戶端的圖片載入問題;

三、開發環境

推薦開發者使用 Android Studio 作為自己的開發工具,本開發文件也是基於 Android Studio開發環境下進行編寫的。

四、整合方式

詳細閱讀:https://www.volcengine.com/docs/508/65969

  1. 專案 build.gradle 下加上
maven {
     url   'https://dl.bintray.com/ttgamesdk/public'
      }
  1. app module build.gradle下加上
implementation 'com.bytedance.fresco:fresco:1.0.4'
implementation "com.bytedance.fresco:animated-gif:1.0.4", //gif
implementation "com.bytedance.fresco:animated-webp:1.0.4", //webp animated
implementation "com.bytedance.fresco:webpsupport:1.0.4", //低版本webp支援
implementation "com.bytedance.fresco:drawee:1.0.4",  //fresco元件
implementation "com.bytedance.fresco:statistics:1.0.4",  //監控+網路元件
implementation "com.bytedance.fresco:heif:1.0.4"

五、接入說明

1. 初始化

SDK在整合之前需要將此AppID傳入引數裡(需要注意的是AppID在Android端SDK中也簡寫為“aid”),部分引數含義詳解如下:

  • AppID(aid):SDK用於打點監控上報的最小單元,通過此將資料進行隔離上報,同時通過AppID可以拉取對應的雲控配置比如客戶端取樣率、網路優化引數等。

  • deviceId:裝置的唯一編號,用於統計區分使用。

  • versionName,versionCode:主要用於資料統計與配置拉取。

  • channel:渠道標識,用於區分統計,比如根據不同頻道可以傳入huawei、oppo等不同渠道便於自動以統計。

  • appName:App的名稱,用於統計使用。

  • isOversea:主要根據App是否釋出海外決定上報的日誌的物理位置,滿足GDPR合規性要求,如實填寫,比如App為南美使用,則傳入 true即可,取樣後的日誌自動上報到海外地區。

String aid =  "xxx";                // App ID
    String deviceId =  "xxx" ; // 裝置 ID
    String versionName =  "0.0.1" ;      // App 版本號
    String versionCode =  "1" ;          // App 版本code
    String channel =  "debug" ;          // 渠道
    String appName =  "Sample" ; // App 名稱
     boolean  isOversea = false; // App是否釋出在海外
     _// 統計功能_ 
    Set<RequestListener> listeners =  new   HashSet<>();
    listeners.add(  new    FrescoTraceListener( this , aid, deviceId, versionName, channel, isOversea));
      

     _// HEIF功能配置_ 
    PoolFactory factory =  new   PoolFactory(PoolConfig. _newBuilder_ ().build());
    ImagePipelineConfig.Builder builder = ImagePipelineConfig. _newBuilder_ ( this )
            .setNetworkFetcher( new   FrescoTTNetFetcher( this , aid, deviceId,versionCode, versionName,
                    channel, appName))
            .setRequestListeners(listeners)
            .setImageDecoderConfig(ImageDecoderConfig. _newBuilder_ ().addDecodingCapability(
                    HeifDecoder. _HEIF_FORMAT_ ,
      new   HeifDecoder.HeifFormatChecker(), new   HeifDecoder.HeifFormatDecoder(factory.getPooledByteBufferFactory())).build());
      

    Fresco. _initialize_ (  this  , builder.build());

注 :FrescoTraceListener構造引數均不能為null

FrescoTraceListener(@NonNull Context context,
                             @NonNull String aid,
                             @NonNull String deviceId,
                             @NonNull String appVersion,
                             @NonNull String channel,
                             boolean    isOversea)

注 :FrescoTTNetFetcher構造引數均不能為null

public  FrescoTTNetFetcher(@NonNull Application context, 
                              @NonNull String appId, 
                              @NonNull String deviceId,
                              @NonNull String versionCode, 
                              @NonNull String versionName, 
                              @NonNull String channel, 
                              @NonNull String appName)

2. 使用方式

使用方式和正常的Fresco一樣,Fresco的 api 並沒有修改,參考:https://www.fresco-cn.org/

3. 單獨使用監控功能的方式

如果不想使用改造後的Fresco,使用facebook源的Fresco,可以只使用提供的統計功能。

implementation "com.bytedance.fresco:statistics:1.0.4"
Set<RequestListener> listeners =   new    HashSet<>();
listeners.add(  new    FrescoTraceListener(context,   "xxx"  ,   "xxxx"  ,   "0.0.1"  ,   "debug"   ,    false  ));
ImagePipelineConfig.Builder builder = ImagePipelineConfig. _newBuilder_ (  this  )
            .setNetworkFetcher(  new    TTFrescoOkHttpFetcher())
            .setRequestListeners(listeners)
Fresco. _initialize_ (  this  , builder.build());
  

4. Feature使用

Android 9.0 libwebp解碼

Android 9.0版本上,系統原生的Webp解碼方式有bug,這裡提供使用libwebp解碼的方式。

ImagePipelineConfig  . Builder  builder =   ImagePipelineConfig  .newBuilder(  this  );
// 對9.0版本開啟libwebp解碼
builder.experiment().setPieDecoderEnabled(  true  );

效能差異:在honor magic2上對同一圖片進行benchmark測試,Android原生解碼:15.9ms,libwebp解碼:16.4ms,差距不大。

低記憶體策略

接入方式:
Fresco初始化之前配置以下程式碼

    ImageDecodeBitmapConfigStrategy.setStrategy(ImageDecodeBitmapConfigStrategy. _MEMORY_AT_LEAST_ );

OOM兜底

接入方式:

ImagePipelineConfig  . Builder  builder =   ImagePipelineConfig  .newBuilder(  this  )
builder.experiment().setOomOptEnabled(  true  );
  

動圖漸進式

接入方式:

  1. 全域性開啟:
ImagePipelineConfig  .getDefaultImageRequestConfig().setProgressiveRenderingEnabled(  true  );
  1. 單個請求開啟:
ImageRequestBuilder  builder =   ImageRequestBuilder  
            .newBuilderWithSource(uri)
            .setProgressiveRenderingEnabled(  true  );
DraweeController controller =   Fresco  .newDraweeControllerBuilder()
            .setAutoPlayAnimations(  true  )
            .setImageRequest(builder.build())
            .setOldController(getController())
            .build();
setController(controller);
  

智慧裁剪

接入方式:

ImageRequestBuilder builder = ImageRequestBuilder
            . _newBuilderWithSource_ (uri)
            .setImageDecodeOptions(  new    ImageDecodeOptionsBuilder()
                .setUseSmartCrop(  true  )
                .build());
DraweeController controller = Fresco. _newDraweeControllerBuilder_ ()
            .setImageRequest(builder.build())
            .setOldController(getController())
            .build();
setController(controller);

文章為原創文章,若有侵權請聯絡;

相關文章