Animated WebP Image not showing correctly using UIImageView or FLAnimatedImageView

[dreampiggy]

New Issue Checklist

• I have read and understood the CONTRIBUTING guide
• I have read the Documentation
• I have searched for a similar issue in the project and found none

Issue Info

Info	Value
Platform Name	ios
Platform Version	7.0-10.0
SDWebImage Version	4.0
Integration Method	cocoapods
Xcode Version	Xcode 8.3.2
Repro rate	all the time (100%)
Repro with our demo prj	YES, the demo Image-5 renders wrong.
Demo project link	https://github.com/dreampiggy/AnimatedWebPDemo

Issue Description and Steps

Description:

SDWebImage 4.0 add support to animated WebP. But when downloading and showing some of animated WebP using SDWebImage API(eg. sd_setImageWithURL:) to UIImageView or FLAnimatedImageView instance, the imageview can't render correctly.

Comparing to another animated WebP library (YYImage), it seems that the decoder for WebP to get per frame images works wrong.

Also, current implementation does not support WebP disposal method, which cause many animated WebP images look strange. And due to UIImage's API, the duration parameter just use the average duration for each frame, which is different from the animated WebP standard which allows set different duration per frame and also cause some images look strange.

For more detail and intuitive effect, you can go to the demo project to build and run.

Step:

1. find some animated WebP images' URLs.
2. create an FLAnimatedImageView or UIImageView instance and use sd_setImageWithURL: API to set image.
3. when showing animated WebP images, the images not showing correctly(looks strange).

[dreampiggy]

By reading the decoder from YYImage and SDWebImage , I found that for single frame animated WebP, the libwebp's WebPBitstreamFeatures.height and width is the images' actual size. But for multiple frame images, this will return the current frame canvas size(but not image size, which can be smaller than total image size). This will make the final UIImage array contains different size, cause UIImageView render bug(The UIKit doc specify "All images included in the animated image should share the same size and scale."). We should useWebPDemuxGetI to get the actual image size.

Looks at this animated webp image (actual size is 100x100), but the rendered animated images array (via none blend mode) used for +[UIImage animatedImageWithImages:duration:] show the wrong size.

[dreampiggy]

The YYImageCoder code reference :YYImage

This image size is correct:

[dreampiggy]

There is an simple fix(which first create UIImage through CGImageCreate from WebPData. Then draw this UIImage to an new CGBitmapContext with actual size(not just the canvas size).

The simple fix fork is here: SDWebImage

Consider a higher performance(because create CGBitmapContext waste extra time), maybe we can modify the RGBA vector transform to do these. I found that YYImage use the vImage_Buffer and add an vImage_CGAffineTransform to do this vector transform(refer here). I will try this solution for performance later.

[dreampiggy]

Also, I found that the animated WebP dipose method(see here) is not support, currently is assume that all frames use the background disposal.

By sharing a blend canvas while decoding multiple frame animated webp image, we could do disposal and blend correctly(not relay on that last image).

[dreampiggy]

PR is here: #1952

[dreampiggy]

Because +[UIImage animatedImageWithImages:duration:] just use the average duration for each frame, which is not the animated WebP standard. Animated WebP can has different duration per frame. Therefore, we should divide the total duration and add image item multiple times to solve this issue. The code like this:

NSArray<UIImage *> *)images;
NSUInteger count = images.count;
int durations[count];
int const gcd = gcdArray(count, durations);
NSMutableArray<UIImage *> *animatedImages = [NSMutableArray arrayWithCapacity:count];
[images enumerateObjectsUsingBlock:^(UIImage * _Nonnull image, NSUInteger idx, BOOL * _Nonnull stop) {
    int duration = durations[idx];
    int repeatCount = duration / gcd;
    for (int i = 0; i < repeatCount; ++i) {
        [animatedImages addObject:image];
    }
}];

[bpoplauschi]

Fixed by #1952