Added the basic JXL animation support

This does not works on SDAnimatedImageView though

Author: dreampiggy

Example/SDWebImageJPEGXLCoder/SDViewController.m

@@ -12,7 +12,7 @@
 
 @interface SDViewController ()
 @property (nonatomic, strong) UIImageView *imageView1;
-@property (nonatomic, strong) SDAnimatedImageView *imageView2;
+@property (nonatomic, strong) UIImageView *imageView2;
 
 @end
 
@@ -22,15 +22,15 @@ - (void)viewDidLoad {
     [super viewDidLoad];
     // Do any additional setup after loading the view, typically from a nib.
 
-    [SDImageCache.sharedImageCache clearDiskOnCompletion:nil];
+    [SDImageCache.sharedImageCache.diskCache removeAllData];
 
     [[SDImageCodersManager sharedManager] addCoder:[SDImageJPEGXLCoder sharedCoder]];
 
     self.imageView1 = [UIImageView new];
     self.imageView1.contentMode = UIViewContentModeScaleAspectFit;
     [self.view addSubview:self.imageView1];
 
-    self.imageView2 = [SDAnimatedImageView new];
+    self.imageView2 = [UIImageView new];
     self.imageView2.contentMode = UIViewContentModeScaleAspectFit;
     [self.view addSubview:self.imageView2];
 
@@ -41,15 +41,16 @@ - (void)viewDidLoad {
         if (image) {
             NSLog(@"%@", @"Static JPEG-XL load success");
         }
-        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
-            NSUInteger maxFileSize = 4096;
-            NSData *jxlData = [SDImageJPEGXLCoder.sharedCoder encodedDataWithImage:image format:SDImageFormatJPEGXL options:@{SDImageCoderEncodeMaxFileSize : @(maxFileSize)}];
-            if (jxlData) {
-                NSLog(@"%@", @"JPEG-XL encoding success");
-            }
-        });
+        // TODO, JXL encoding
+//        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
+//            NSUInteger maxFileSize = 4096;
+//            NSData *jxlData = [SDImageJPEGXLCoder.sharedCoder encodedDataWithImage:image format:SDImageFormatJPEGXL options:@{SDImageCoderEncodeMaxFileSize : @(maxFileSize)}];
+//            if (jxlData) {
+//                NSLog(@"%@", @"JPEG-XL encoding success");
+//            }
+//        });
     }];
-    [self.imageView2 sd_setImageWithURL:animatedURL placeholderImage:nil options:SDWebImageProgressiveLoad completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {
+    [self.imageView2 sd_setImageWithURL:animatedURL placeholderImage:nil completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {
         if (image) {
             NSLog(@"%@", @"Animated JPEG-XL load success");
         }

README.md

@@ -12,7 +12,11 @@ See: [Why JPEG-XL](https://jpegxl.info/why-jxl.html)
 
 This coder supports the HDR/SDR decoding, as well as JPEG-XL aniamted image.
 
-Note: Apple's ImageIO supports JPEGXL decoding from iOS 17/tvOS 17/watchOS 10/macOS 14 (via: [WWDC2023](https://developer.apple.com/videos/play/wwdc2023/10122/)), so SDWebImage on those platform can also decode JPEGXL images using `SDImageIOCoder` (but no animated JPEG-XL support)
+## TODO
+
+1. This coder supports animation via UIImageView/NSImageView, no SDAnimatedImageView currently (Because the current coder API need codec supports non-sequential frame decoding, but libjxl does not have. Will remove this limit in SDWebImage 6.0)
+2. This coder does not supports JPEG-XL encoding (Because I have no time :))
+3. Apple's ImageIO supports JPEGXL decoding from iOS 17/tvOS 17/watchOS 10/macOS 14 (via: [WWDC2023](https://developer.apple.com/videos/play/wwdc2023/10122/)), so SDWebImage on those platform can also decode JPEGXL images using `SDImageIOCoder` (but no animated JPEG-XL support)
 
 ## Requirements
 
@@ -94,6 +98,8 @@ let imageView: UIImageView
 imageView.sd_setImage(with: JPEGXLURL)
 ```
 
+Note: You can also test animated JPEG-XL on UIImageView/NSImageView and WebImage (via SwiftUI port)
+
 ## Example
 
 To run the example project, clone the repo, and run `pod install` from the root directory first. Then open `SDWebImageJPEGXLCoder.xcworkspace`.

SDWebImageJPEGXLCoder/Classes/SDImageJPEGXLCoder.m

@@ -14,8 +14,18 @@
 @import libjxl;
 #endif
 
-#define SD_TWO_CC(c1,c2) ((uint16_t)(((c2) << 8) | (c1)))
-#define SD_FOUR_CC(c1,c2,c3,c4) ((uint32_t)(((c4) << 24) | ((c3) << 16) | ((c2) << 8) | (c1)))
+typedef void (^sd_cleanupBlock_t)(void);
+
+#if defined(__cplusplus)
+extern "C" {
+#endif
+    void sd_executeCleanupBlock (__strong sd_cleanupBlock_t *block);
+#if defined(__cplusplus)
+}
+#endif
+
+//#define SD_TWO_CC(c1,c2) ((uint16_t)(((c2) << 8) | (c1)))
+//#define SD_FOUR_CC(c1,c2,c3,c4) ((uint32_t)(((c4) << 24) | ((c3) << 16) | ((c2) << 8) | (c1)))
 
 static void FreeImageData(void *info, const void *data, size_t size) {
     free((void *)data);
@@ -108,6 +118,7 @@ - (UIImage *)decodedImageWithData:(NSData *)data options:(SDImageCoderOptions *)
     if (!data) {
         return nil;
     }
+    BOOL decodeFirstFrame = [options[SDImageCoderDecodeFirstFrameOnly] boolValue];
     CGFloat scale = 1;
     if ([options valueForKey:SDImageCoderDecodeScaleFactor]) {
         scale = [[options valueForKey:SDImageCoderDecodeScaleFactor] doubleValue];
@@ -132,25 +143,20 @@ - (UIImage *)decodedImageWithData:(NSData *)data options:(SDImageCoderOptions *)
         preserveAspectRatio = preserveAspectRatioValue.boolValue;
     }
 
-    CGImageRef imageRef = [self sd_createJXLImageWithData:data thumbnailSize:thumbnailSize preserveAspectRatio:preserveAspectRatio];
-    if (!imageRef) {
-        return nil;
-    }
-    
-#if SD_MAC
-    UIImage *image = [[UIImage alloc] initWithCGImage:imageRef scale:scale orientation:kCGImagePropertyOrientationUp];
-#else
-    UIImage *image = [[UIImage alloc] initWithCGImage:imageRef scale:scale orientation:UIImageOrientationUp];
-#endif
-    CGImageRelease(imageRef);
-    
-    return image;
-}
-
-- (nullable CGImageRef)sd_createJXLImageWithData:(NSData *)data thumbnailSize:(CGSize)thumbnailSize preserveAspectRatio:(BOOL)preserveAspectRatio CF_RETURNS_RETAINED {
-    // Learn example to render on screen, see: libjxl/tools/viewer/load_jxl.cc
+    // cleanup
+    __block JxlDecoder *dec;
+    __block CGColorSpaceRef colorSpaceRef;
+    __strong void(^cleanupBlock)(void) __attribute__((cleanup(sd_executeCleanupBlock), unused)) = ^{
+        if (colorSpaceRef) {
+            CGColorSpaceRelease(colorSpaceRef);
+        }
+        if (dec) {
+            JxlDecoderDestroy(dec);
+        }
+    };
 
-    JxlDecoder *dec = JxlDecoderCreate(NULL);
+    // Get basic info
+    dec = JxlDecoderCreate(NULL);
     if (!dec) return nil;
 
     // feed data
@@ -160,7 +166,7 @@ - (nullable CGImageRef)sd_createJXLImageWithData:(NSData *)data thumbnailSize:(C
     // note: when using `JxlDecoderSubscribeEvents` libjxl behaves likes incremental decoding
     // which need event loop to get latest status via `JxlDecoderProcessInput`
     // each status reports your next steps's info
-    status = JxlDecoderSubscribeEvents(dec, JXL_DEC_BASIC_INFO | JXL_DEC_COLOR_ENCODING | JXL_DEC_FULL_IMAGE);
+    status = JxlDecoderSubscribeEvents(dec, JXL_DEC_BASIC_INFO | JXL_DEC_COLOR_ENCODING | JXL_DEC_FRAME | JXL_DEC_FULL_IMAGE);
     if (status != JXL_DEC_SUCCESS) return nil;
 
     // decode it
@@ -171,9 +177,9 @@ - (nullable CGImageRef)sd_createJXLImageWithData:(NSData *)data thumbnailSize:(C
     JxlBasicInfo info;
     status = JxlDecoderGetBasicInfo(dec, &info);
     if (status != JXL_DEC_SUCCESS) return nil;
+    CGImagePropertyOrientation exifOrientation = (CGImagePropertyOrientation)info.orientation;
 
     // colorspace
-    CGColorSpaceRef colorSpaceRef;
     size_t profileSize;
     status = JxlDecoderProcessInput(dec);
     if (status != JXL_DEC_COLOR_ENCODING) return nil;
@@ -196,6 +202,76 @@ - (nullable CGImageRef)sd_createJXLImageWithData:(NSData *)data thumbnailSize:(C
         CGColorSpaceRetain(colorSpaceRef);
     }
 
+    // animation check
+    BOOL hasAnimation = info.have_animation;
+    if (!hasAnimation || decodeFirstFrame) {
+        status = JxlDecoderProcessInput(dec);
+        if (status != JXL_DEC_FRAME) return nil;
+        CGImageRef imageRef = [self sd_createJXLImageWithDec:dec info:info colorSpace:colorSpaceRef thumbnailSize:thumbnailSize preserveAspectRatio:preserveAspectRatio];
+        if (!imageRef) {
+            return nil;
+        }
+#if SD_MAC
+        UIImage *image = [[UIImage alloc] initWithCGImage:imageRef scale:scale orientation:exifOrientation];
+#else
+        UIImageOrientation orientation = [SDImageCoderHelper imageOrientationFromEXIFOrientation:exifOrientation];
+        UIImage *image = [[UIImage alloc] initWithCGImage:imageRef scale:scale orientation:orientation];
+#endif
+        CGImageRelease(imageRef);
+        
+        return image;
+    }
+    // loop frame
+    NSUInteger loopCount = info.animation.num_loops;
+    NSMutableArray<SDImageFrame *> *frames = [NSMutableArray array];
+    JxlFrameHeader header;
+    do {
+        @autoreleasepool {
+            status = JxlDecoderProcessInput(dec);
+            if (status != JXL_DEC_FRAME) break;
+            status = JxlDecoderGetFrameHeader(dec, &header);
+            if (status != JXL_DEC_SUCCESS) continue;
+            
+            // frame decode
+            NSTimeInterval duration = [self sd_frameDurationWithInfo:info header:header];
+            CGImageRef imageRef = [self sd_createJXLImageWithDec:dec info:info colorSpace:colorSpaceRef thumbnailSize:thumbnailSize preserveAspectRatio:preserveAspectRatio];
+            if (!imageRef) continue;
+#if SD_MAC
+            UIImage *image = [[UIImage alloc] initWithCGImage:imageRef scale:scale orientation:exifOrientation];
+#else
+            UIImageOrientation orientation = [SDImageCoderHelper imageOrientationFromEXIFOrientation:exifOrientation];
+            UIImage *image = [[UIImage alloc] initWithCGImage:imageRef scale:scale orientation:orientation];
+#endif
+            CGImageRelease(imageRef);
+            
+            // Assemble frame
+            SDImageFrame *frame = [SDImageFrame frameWithImage:image duration:duration];
+            [frames addObject:frame];
+        }
+    } while (!header.is_last);
+    
+    UIImage *animatedImage = [SDImageCoderHelper animatedImageWithFrames:frames];
+    animatedImage.sd_imageLoopCount = loopCount;
+    animatedImage.sd_imageFormat = SDImageFormatJPEGXL;
+    
+    return animatedImage;
+}
+
+- (NSTimeInterval)sd_frameDurationWithInfo:(JxlBasicInfo)info header:(JxlFrameHeader)header {
+    // Calculate duration, this is `tick`
+    // We need tps (tick per second) to calculate
+    NSTimeInterval duration = (double)header.duration * info.animation.tps_denominator / info.animation.tps_numerator;
+    if (duration < 0.1) {
+        // Should we still try to keep broswer behavior to limit 100ms ?
+        // Like GIF/WebP ?
+        return 0.1;
+    }
+    return duration;
+}
+
+- (nullable CGImageRef)sd_createJXLImageWithDec:(JxlDecoder *)dec info:(JxlBasicInfo)info colorSpace:(CGColorSpaceRef)colorSpace thumbnailSize:(CGSize)thumbnailSize preserveAspectRatio:(BOOL)preserveAspectRatio CF_RETURNS_RETAINED {
+    JxlDecoderStatus status;
+    
     // bitmap format
     BOOL hasAlpha = info.alpha_bits != 0;
     BOOL premultiplied = info.alpha_premultiplied;
@@ -255,13 +331,13 @@ - (nullable CGImageRef)sd_createJXLImageWithData:(NSData *)data thumbnailSize:(C
     status = JxlDecoderProcessInput(dec);
     if (status != JXL_DEC_FULL_IMAGE) return nil; // Final status
 
-    JxlDecoderDestroy(dec);
-    
     // create CGImage
     CGDataProviderRef provider = CGDataProviderCreateWithData(NULL, buffer, bufferSize, FreeImageData);
     CGColorRenderingIntent renderingIntent = kCGRenderingIntentDefault;
     BOOL shouldInterpolate = YES;
-    CGImageRef imageRef = CGImageCreate(width, height, bitsPerComponent, bitsPerPixel, bytesPerRow, colorSpaceRef, bitmapInfo, provider, NULL, shouldInterpolate, renderingIntent);
+    CGImageRef imageRef = CGImageCreate(width, height, bitsPerComponent, bitsPerPixel, bytesPerRow, colorSpace, bitmapInfo, provider, NULL, shouldInterpolate, renderingIntent);
+    CGDataProviderRelease(provider);
+    
     if (!imageRef) {
         return nil;
     }