因为动态的webp使用的也越来越多了，所以这里记录一种加载处理的办法。目前常用的Android图片加载库，只有fresco是可以直接加载animated webp的。那么如何处理呢？记录一下，不然坑都白踩了。本质上webp和gif都是一组图片组成的连续图片，如果要单独解析每一帧怎么办呢。
Android支持
如果要拿到webp的第一帧，在Android以上是可以直接使用如下这种方法，默认取的是第一帧，但是，这种方法只有在8.0及以上才有用。
Bitmap bitmap = BitmapFactory.decodeFile(filename);
fresco控制animated webp
添加fresco支持webp的方法是：
implementation 'com.facebook.fresco:fresco:1.13.0'
implementation 'com.facebook.fresco:webpsupport:1.13.0'
//implementation 'com.facebook.fresco:animated-gif:1.13.0'
添加之后就可以直接加载webp了，也可以设置自动开始播放，如下：
ImageRequestBuilder imageRequestBuilder = ImageRequestBuilder.newBuilderWithSource(uri);
PipelineDraweeControllerBuilder builder = Fresco.newDraweeControllerBuilder();
builder.setImageRequest(imageRequestBuilder.build());
builder.setAutoPlayAnimations(true);
builder.setControllerListener(new BaseControllerListener<ImageInfo>() {
@Override
public void onFinalImageSet(String id, ImageInfo imageInfo, Animatable animatable) {
//加载完成的监听
}
});
simpleDraweeView.setController(builder.build());
到这一步都很简单，但是要加载webp的第一帧咋办呢？
先来一种最简单的，类似于BitmapFactory.decodeFile()，fresco中也有一个方法，同样的，这种方法也是仅支持8.0及以上
Bitmap bitmap = WebpSupportStatus
.loadWebpBitmapFactoryIfExists()
.decodeFile(filename, new BitmapFactory.Options());
那么还有什么办法呢？还可以使用下面这种方法。这种方法是用的是fresco的订阅者，可以处理加载之后的数据，可以拿到webp的每一帧，然后做你想要的处理，官网链接。
ImageDecodeOptionsBuilder decodeOptionsBuilder = new ImageDecodeOptionsBuilder();
decodeOptionsBuilder.setDecodeAllFrames(true);
decodeOptionsBuilder.setBitmapConfig(Bitmap.Config.ARGB_8888);
ImagePipelineFactory.getInstance()
.getImagePipeline()
.fetchDecodedImage(ImageRequestBuilder
.newBuilderWithSource(Uri.fromFile(new File(filename)))
.setImageDecodeOptions(new ImageDecodeOptions(decodeOptionsBuilder))
.build()
, context)
.subscribe(new BaseDataSubscriber<CloseableReference<CloseableImage>>() {
@Override
protected void onNewResultImpl(DataSource<CloseableReference<CloseableImage>> dataSource) {
if (dataSource.getResult().get() instanceof CloseableAnimatedImage) {
CloseableAnimatedImage animatedImage = (CloseableAnimatedImage) dataSource.getResult().get();
if (animatedImage.getImage().getFrameCount() > 0) {
Bitmap frameBitmap = Bitmap.createBitmap(animatedImage.getWidth(), animatedImage.getHeight(), Bitmap.Config.ARGB_8888);
//添加透明通道
frameBitmap.eraseColor(Color.TRANSPARENT);
frameBitmap.setHasAlpha(true);
animatedImage.getImage().getFrame(0).renderFrame(animatedImage.getWidth(), animatedImage.getHeight(), frameBitmap);
try {
//保存成文件
File file = new File(filename);
File outFile = new File(file.getParent(), file.getName() + ".png");
FileOutputStream out = new FileOutputStream(outFile);
frameBitmap.compress(Bitmap.CompressFormat.PNG, 100, out);
out.flush();
out.close();
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
@Override
protected void onFailureImpl(DataSource<CloseableReference<CloseableImage>> dataSource) {
}
}, CallerThreadExecutor.getInstance());
需要注意的地方有三个：
- 下面这种方法默认解出来的bitmap是不带透明通道的，需要你处理一遍。
- 第二个是，这种方法拿到的bitmap离开这个方法之后就有可能会被回收掉，如果你要长久使用的话，建议自己再copy一遍，我为了节省解压的时间，我直接保存成为一张png的文件，然后去使用，你也可以直接copy出来bitmap去使用的。
- 这种方法可以解压出来每一帧，选择你需要帧数来处理就可以了。
Glide4控制GIF
关于GIF，目前支持的主流的加载库只有Glide和fresco，Picasso并不默认支持。
在这里顺便记录一下Glide4.0加载Gif的并控制播放的方式。在Glide3中GlideDrawableImageViewTarget已经被废弃了，可以使用GifDrawable来控制，里面有控制GIF的方法，也可以拿到GIF的每一帧来处理，定义好的接口方法就在那里，不离不弃，看下接口就知道了。
public void setStartPlayGif(final boolean startPlayGif) {
Glide.with(context)
.asGif()
.load("gifFile")
.into(new ImageViewTarget<GifDrawable>(imageView) {
@Override
protected void setResource(@Nullable GifDrawable resource) {
if (resource != null) {
if(startPlayGif){
//resource.setLoopCount(1);
view.setImageDrawable(resource);
} else {
view.setImageBitmap(resource.getFirstFrame());
}
}
}
});
}