如何讓Android 支持HEIF 圖片解碼和加載（免費的方法）

2021 年 6 月 6 日
筆記
圖像圖像

位元組跳動火山引擎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開發環境下進行編寫的。

四、集成方式

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

項目 build.gradle 下加上

maven {
     url   '//dl.bintray.com/ttgamesdk/public'
      }

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 並沒有修改，參考：//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  );

動圖漸進式

接入方式：

全局開啟：

ImagePipelineConfig  .getDefaultImageRequestConfig().setProgressiveRenderingEnabled(  true  );

單個請求開啟：

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);

文章為原創文章，若有侵權請聯繫；

Tags: 圖像圖像