| 導語AVIF是一種基于AV1視頻編碼的新一代圖像格式，壓縮率高，畫面細節好。移動端APP經常面臨網絡環境不穩定、需要幫用戶節省流量等場景，那就使用AVIF圖片吧。不過AVIF目前只在 iOS16、Android12 上得到原生支持，很多機型覆蓋不到，怎么辦？本文來教你一分鐘集成AVIF解碼器，兼容所有機型。

AVIF簡介

AVIF是一種基于AV1視頻編碼的新圖像格式，相對于JPEG，WEBP這類圖片格式來說，它的壓縮率更高，并且畫面細節更好。而最關鍵的是，AV1 由谷歌發起的AOM(開放媒體聯盟)推動，在 VP9 的基礎上繼續演進，無專利授權費用（而且騰訊也是AOM的創始成員哦），關于更多的AVIF介紹，可以自行搜索，這里不再贅述。

APP顯示AVIF圖片

由于AVIF目前只在 iOS16、Android12 上得到原生支持，要想覆蓋所有主流機型，單靠原生支持肯定是不夠的。因此需要客戶端開發時集成AVIF解碼器自行解碼，

業內開源編解碼庫： https://github.com/AOMediaCodec/libavif

騰訊自研編解碼庫：本文的數據萬象AVIF SDK基于該編解碼庫

直接使用上述解碼庫，需要自行編譯Android和iOS解碼器產物，以及寫一些JNI代碼，如果您的APP使用Glide、SDWebImage等圖片庫，還得再按照圖片庫的要求進行封裝集成。這些有不少的工作量，本文叫”一分鐘讓APP支持AVIF圖片“顯然是有更快的方法，那就是接入數據萬象AVIF SDK，上述這些事情我們已經幫您做好啦。

數據萬象AVIF圖片SDK

一、Android一分鐘集成

使用Glide圖片庫

1. 安裝 Glide 和 AVIF SDK

implementation 'com.qcloud.cos:avif:1.1.0' implementation 'com.github.bumptech.glide:glide:version'annotationProcessor 'com.github.bumptech.glide:compiler:version'

2. 注冊解碼器 GlideModule

// 注冊自定義 GlideModule // 開發者應該創建此類注冊相關解碼器<br> // 類庫開發者可以繼承 LibraryGlideModule 創建類似的注冊類@GlideModulepublic class MyAppGlideModule extends AppGlideModule { @Override public void registerComponents(@NonNull Context context, @NonNull Glide glide, Registry registry) { /*------------------解碼器 開始-------------------------*/ //注冊 AVIF 靜態圖片解碼器 registry.prepend(Registry.BUCKET_BITMAP, InputStream.class, Bitmap.class, new StreamAvifDecoder(glide.getBitmapPool(), glide.getArrayPool())); registry.prepend(Registry.BUCKET_BITMAP, ByteBuffer.class, Bitmap.class, new ByteBufferAvifDecoder(glide.getBitmapPool())); //注冊 AVIF 動圖解碼器 registry.prepend(InputStream.class, AvifSequenceDrawable.class, new StreamAvifSequenceDecoder(glide.getBitmapPool(), glide.getArrayPool())); registry.prepend(ByteBuffer.class, AvifSequenceDrawable.class, new ByteBufferAvifSequenceDecoder(glide.getBitmapPool())); /*------------------解碼器 結束-------------------------*/ }}

3. 使用 Glide 加載圖片

像普通jpg png圖片那樣加載圖片即可，請參見 Glide 官方文檔

Glide.with(context).load(url).into(imageView);

使用Fresco圖片庫

1. 安裝 Fresco 和 AVIF SDK

implementation 'com.qcloud.cos:avif:1.1.0' implementation 'com.facebook.fresco:fresco:version'// 如果需要支持 avif 動圖解碼器 則需要加上 fresco:animated-base 依賴implementation 'com.facebook.fresco:animated-base:version'

2. 配置解碼器

// 解碼器配置ImageDecoderConfig imageDecoderConfig = new ImageDecoderConfig.Builder() // 配置 AVIF 靜態解碼器 .addDecodingCapability( AvifFormatChecker.AVIF, new AvifFormatChecker(), new FrescoAvifDecoder()) // 配置 AVIF 動圖解碼器 .addDecodingCapability( AvisFormatChecker.AVIS, new AvisFormatChecker(), new FrescoAvisDecoder()) .build();// 配置 Image PipelineImagePipelineConfig config = ImagePipelineConfig.newBuilder(context) .setImageDecoderConfig(imageDecoderConfig) .build();// 初始化 FrescoFresco.initialize(context, config);

3. 使用 Fresco 加載圖片

像普通jpg png圖片那樣加載圖片即可，請參見 Fresco 官方文檔。

<com.facebook.drawee.view.SimpleDraweeView android:id="@+id/my_image_view" android:layout_width="130dp" android:layout_height="130dp" fresco:placeholderImage="@drawable/my_drawable" />Uri uri = Uri.parse("https://xxx.com/test.avif");SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);draweeView.setImageURI(uri);

二、iOS一分鐘集成

1. 安裝SDWebImage 和 AVIF SDK

在您工程 Podfile 文件中添加模塊：

pod 'CloudInfinite/SDWebImage-CloudInfinite'pod 'CloudInfinite/AVIF'

在終端執行安裝命令：

pod install

2. 使用 SDWebImage 直接加載 AVIF 圖片

SDWebImage-CloudInfinite 模塊在 APP 啟動時已自動將 AVIF 解碼器加入到 SDWebImage 解碼器隊列中，在加載解碼器時自動找到 AVIF 解碼器來解碼圖片。支持動圖，無需額外操作。使用時與 SDWebImage 使用沒有任何區別。

Objective-C

[imageView sd_setImageWithURL:[NSURL URLWithString:@"AVIF 圖片鏈接"]];

swift

UIImageView() .sd_setImage(with: NSURL.init(string: "AVIF 圖片鏈接"))

數據萬象AVIF SDK其他功能

一、基礎解碼器

用于直接將AVIF數據解碼為bitmap、UIImage，以及判斷圖片數據是否是AVIF格式

Android

import com.tencent.qcloud.image.avif.Avif;// 圖片的字節數組byte[] buffer = new byte[XXX];// 是否是 AVIF 格式boolean isAvif = Avif.isAvif(buffer);// 是否是 AVIF 動圖 boolean isAvis = Avif.isAvis(buffer);// 原圖解碼Bitmap bitmap = Avif.decode(buffer);// 寬度等比解碼// 目標寬度int dstWidth = 500; Bitmap bitmap = Avif.decode(buffer, dstWidth);// 區域縮放解碼// 區域左上角x坐標int x = 0;// 區域左上角y坐標int y = 0;// 區域寬度int width = 100;// 區域高度int height = 100;// 縮放比, 大于1的時候才生效，小于等于1的情況下不作縮放int inSampleSize = 2;Bitmap bitmap = Avif.decode(buffer, x, y, width, height, inSampleSize);

iOS

#import "AVIFDecoderHelper.h"#import "UIImage+AVIFDecode.h"//判斷是否是 AVIF 格式以及動圖格式// data為圖片NSData類型數據BOOL isAVIF = [AVIFDecoderHelper isAVIFImage:data];//解碼 AVIF 圖片// data為圖片NSData類型數據UIImage * image = [UIImage AVIFImageWithContentsOfData:data];/ data為圖片NSData類型數據// 縮小兩倍 并指定解碼的范圍( rect 以原圖為基準)UIImage * image = [UIImage AVIFImageWithContentsOfData:imageData scale:2 rect:CGRectMake(x, y, width, height)];

二、Android超大圖采樣圖片庫

1. 安裝 subsampling-scale-image-view 和 AVIF SDK

implementation 'com.qcloud.cos:avif:1.1.0' implementation 'com.davemorrissey.labs:subsampling-scale-image-view:3.10.0'// AndroidX請使用// implementation 'com.davemorrissey.labs:subsampling-scale-image-view-androidx:3.10.0'

2. 獲取 SubsamplingScaleImageView 控件并注冊解碼器

SubsamplingScaleImageView subsamplingScaleImageView = findViewById(R.id.subsampling_scale_image_view);// 設置AVIF圖片解碼器subsamplingScaleImageView.setBitmapDecoderClass(AvifSubsamplingImageDecoder.class);subsamplingScaleImageView.setRegionDecoderClass(AvifSubsamplingImageRegionDecoder.class);

3. 使用 subsampling-scale-image-view 加載圖片

像普通jpg png圖片那樣加載圖片即可，請參見 subsampling-scale-image-view 官方文檔。

// 加載 uri 圖片subsamplingScaleImageView.setImage(ImageSource.uri(uri));// 加載 assets 圖片subsamplingScaleImageView.setImage(ImageSource.asset("test.avif"));// 加載 resource 圖片subsamplingScaleImageView.setImage(ImageSource.resource(R.raw.avif));

總結

總之就是數據萬象AVIF SDK幫您封裝了AVIF解碼器、對Android iOS常用的圖片庫生態也做了封裝，真正讓您一分鐘就能將AVIF圖片顯示到APP中。

總結

以上是生活随笔為你收集整理的一分钟让您的APP支持AVIF图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。