| 導(dǎo)語(yǔ)AVIF是一種基于AV1視頻編碼的新一代圖像格式，壓縮率高，畫(huà)面細(xì)節(jié)好。移動(dòng)端APP經(jīng)常面臨網(wǎng)絡(luò)環(huán)境不穩(wěn)定、需要幫用戶節(jié)省流量等場(chǎng)景，那就使用AVIF圖片吧。不過(guò)AVIF目前只在 iOS16、Android12 上得到原生支持，很多機(jī)型覆蓋不到，怎么辦？本文來(lái)教你一分鐘集成AVIF解碼器，兼容所有機(jī)型。

AVIF簡(jiǎn)介

AVIF是一種基于AV1視頻編碼的新圖像格式，相對(duì)于JPEG，WEBP這類圖片格式來(lái)說(shuō)，它的壓縮率更高，并且畫(huà)面細(xì)節(jié)更好。而最關(guān)鍵的是，AV1 由谷歌發(fā)起的AOM(開(kāi)放媒體聯(lián)盟)推動(dòng)，在 VP9 的基礎(chǔ)上繼續(xù)演進(jìn)，無(wú)專利授權(quán)費(fèi)用（而且騰訊也是AOM的創(chuàng)始成員哦），關(guān)于更多的AVIF介紹，可以自行搜索，這里不再贅述。

APP顯示AVIF圖片

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

業(yè)內(nèi)開(kāi)源編解碼庫(kù)： https://github.com/AOMediaCodec/libavif

騰訊自研編解碼庫(kù)：本文的數(shù)據(jù)萬(wàn)象AVIF SDK基于該編解碼庫(kù)

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

數(shù)據(jù)萬(wàn)象AVIF圖片SDK

一、Android一分鐘集成

使用Glide圖片庫(kù)

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. 注冊(cè)解碼器 GlideModule

// 注冊(cè)自定義 GlideModule // 開(kāi)發(fā)者應(yīng)該創(chuàng)建此類注冊(cè)相關(guān)解碼器<br> // 類庫(kù)開(kāi)發(fā)者可以繼承 LibraryGlideModule 創(chuàng)建類似的注冊(cè)類@GlideModulepublic class MyAppGlideModule extends AppGlideModule { @Override public void registerComponents(@NonNull Context context, @NonNull Glide glide, Registry registry) { /*------------------解碼器 開(kāi)始-------------------------*/ //注冊(cè) AVIF 靜態(tài)圖片解碼器 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())); //注冊(cè) AVIF 動(dòng)圖解碼器 registry.prepend(InputStream.class, AvifSequenceDrawable.class, new StreamAvifSequenceDecoder(glide.getBitmapPool(), glide.getArrayPool())); registry.prepend(ByteBuffer.class, AvifSequenceDrawable.class, new ByteBufferAvifSequenceDecoder(glide.getBitmapPool())); /*------------------解碼器 結(jié)束-------------------------*/ }}

3. 使用 Glide 加載圖片

像普通jpg png圖片那樣加載圖片即可，請(qǐng)參見(jiàn) Glide 官方文檔

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

使用Fresco圖片庫(kù)

1. 安裝 Fresco 和 AVIF SDK

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

2. 配置解碼器

// 解碼器配置ImageDecoderConfig imageDecoderConfig = new ImageDecoderConfig.Builder() // 配置 AVIF 靜態(tài)解碼器 .addDecodingCapability( AvifFormatChecker.AVIF, new AvifFormatChecker(), new FrescoAvifDecoder()) // 配置 AVIF 動(dòng)圖解碼器 .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圖片那樣加載圖片即可，請(qǐng)參見(jiàn) 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'

在終端執(zhí)行安裝命令：

pod install

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

SDWebImage-CloudInfinite 模塊在 APP 啟動(dòng)時(shí)已自動(dòng)將 AVIF 解碼器加入到 SDWebImage 解碼器隊(duì)列中，在加載解碼器時(shí)自動(dòng)找到 AVIF 解碼器來(lái)解碼圖片。支持動(dòng)圖，無(wú)需額外操作。使用時(shí)與 SDWebImage 使用沒(méi)有任何區(qū)別。

Objective-C

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

swift

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

數(shù)據(jù)萬(wàn)象AVIF SDK其他功能

一、基礎(chǔ)解碼器

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

Android

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

iOS

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

二、Android超大圖采樣圖片庫(kù)

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請(qǐng)使用// implementation 'com.davemorrissey.labs:subsampling-scale-image-view-androidx:3.10.0'

2. 獲取 SubsamplingScaleImageView 控件并注冊(cè)解碼器

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

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

像普通jpg png圖片那樣加載圖片即可，請(qǐng)參見(jiàn) 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));

總結(jié)

總之就是數(shù)據(jù)萬(wàn)象AVIF SDK幫您封裝了AVIF解碼器、對(duì)Android iOS常用的圖片庫(kù)生態(tài)也做了封裝，真正讓您一分鐘就能將AVIF圖片顯示到APP中。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。