| はじめに AVIF は、AV1 ビデオ コーディングをベースにした新世代の画像フォーマットで、高い圧縮率と優れた画像ディテールを備えています。モバイル APP は、ネットワーク環境が不安定で、ユーザーがトラフィックを節約する必要があるシナリオに直面することが多いため、AVIF 画像を使用します。ただし、AVIFは現在iOS16とAndroid12のみネイティブサポートされており、対応できない機種も多いです。この記事では、すべてのモデルと互換性のある AVIF デコーダーを 1 分で統合する方法を説明します。
AVIF の概要
AVIF は、AV1 ビデオエンコーディングをベースにした新しい画像フォーマットで、JPEG や WEBP などの画像フォーマットと比較して、圧縮率が高く、画像の細部まで鮮明です。最も重要なことは、AV1 は Google が主導する AOM (Alliance for Open Media) によって推進されており、VP9 をベースに進化し続けており、特許ライセンス料は発生しません (そして Tencent は AOM の創設メンバーでもあります)。 AVIF の詳細については、自分で検索できるので、ここでは詳しく説明しません。
APP表示AVIF画像
AVIF は現在、iOS16 と Android12 でのみネイティブにサポートされているため、ネイティブ サポートだけではすべての主流モデルをカバーするには明らかに十分ではありません。したがって、クライアントの開発時に AVIF デコーダを組み込み、単独でデコードする必要があります。
業界のオープンソース コーデック ライブラリ: https://github.com/AOMediaCodec/libavif
Tencent の自社開発コーデック ライブラリ: この記事のデータは、Vientiane AVIF SDK のコーデック ライブラリに基づいています。
上記のデコード ライブラリを直接使用するには、Android および iOS デコーダ製品を自分でコンパイルし、いくつかの JNI コードを記述する必要があります。アプリで Glide や SDWebImage などの画像ライブラリを使用する場合は、要件に従ってそれらをパッケージ化して統合する必要があります。画像ライブラリ。これには多くの作業が必要です。この記事は「1 分で APP が AVIF 画像をサポートするようにする」と題されています。明らかに、より速い方法があります。つまり、データ Vientiane AVIF SDK にアクセスします。上記のことはすでに実行済みです。あなた。
データ ビエンチャン AVIF 画像 SDK
1. Android の 1 分間の統合
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);2. iOS 1 分間の統合
1. SDWebImage と AVIF SDK をインストールする
モジュールをプロジェクト Podfile に追加します。
pod 'CloudInfinite/SDWebImage-CloudInfinite'pod 'CloudInfinite/AVIF'ターミナルでインストール コマンドを実行します。
pod install2. SDWebImage を使用して AVIF 画像を直接ロードする
SDWebImage-CloudInfinite モジュールは、APP の起動時に AVIF デコーダを SDWebImage デコーダ キューに自動的に追加し、デコーダがロードされると画像をデコードするための AVIF デコーダを自動的に見つけます。アニメーションは追加の操作なしでサポートされます。SDWebImage を使用する場合には違いはありません。
目的-C
[imageView sd_setImageWithURL:[NSURL URLWithString:@"AVIF 图片链接"]];迅速
UIImageView() .sd_setImage(with: NSURL.init(string: "AVIF 图片链接"))データ ビエンチャン AVIF SDK その他の機能
1. 基本的なデコーダ
AVIF データをビットマップ、UIImage に直接デコードし、画像データが AVIF 形式であるかどうかを判断するために使用されます。
アンドロイド
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)];2. 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));要約する
一言で言えば、Data Vientiane AVIF SDK は、AVIF デコーダーのカプセル化を支援し、Android と iOS で一般的に使用される画像ライブラリの生態もカプセル化するので、1 分以内に APP で AVIF 画像を表示できるようになります。