likes
comments
collection
share

什么?同一张图在Flutter和iOS原生渲染出来效果不一样?

作者站长头像
站长
· 阅读数 63

最近遇到了一个很奇怪的现象,同样的一张图在iOS原生能正常显示,但是在Flutter就显得很暗 具体往下看

现象

什么?同一张图在Flutter和iOS原生渲染出来效果不一样?

可以很清晰的看到iOS对于原图的还原度要比Flutter好太多

思考

<key>FLTEnableImpeller</key>
<true />

尝试关闭Impeller,但是并没有什么效果,所以初步怀疑Impeller的思路或许不太对,所以就开始看之前的在Flutter显示正常的图,最后发现了一个微妙之处,在图片的简介里有一个我不懂的地方不一样,就是颜色描述文件

什么?同一张图在Flutter和iOS原生渲染出来效果不一样?

这里询问chatgpt颜色描述文件:sRGB IEC61966-2.1Display P3有什么区别,得到的回答是

sRGB IEC61966-2.1和Display P3是两种不同的颜色描述文件,它们主要用于不同的显示设备和应用场景。它们的区别主要在于颜色范围和应用领域。

  1. sRGB IEC61966-2.1:sRGB是一种标准的RGB颜色空间,广泛用于互联网、数字摄影和普通的显示设备上。sRGB IEC61966-2.1的颜色范围相对较窄,适合一般图像显示,它的色域较小,能够在大多数常见显示设备上提供相对一致的颜色显示。sRGB通常是图像文件的默认颜色描述文件。
  2. Display P3:Display P3是一种更宽广的颜色空间,偏向于更鲜明和逼真的色彩展示。它主要用于高级的显示设备,如苹果公司的Retina显示器。相对于sRGB,Display P3能够呈现更宽广的颜色范围,对于鲜艳和饱和度较高的颜色效果更为明显。 总结来说,sRGB IEC61966-2.1适合一般的互联网应用和常见显示设备,而Display P3则适用于高级显示设备,如高分辨率显示器和专业图形处理工作。在选择使用哪一种颜色描述文件时,需要考虑图像的应用场景和目标设备的能力来做出合适的选择。

呃。。好像看不出来咋回事,后来看到一篇文章说到Flutter对于Display P3的支持问题,具体意思就是原因就是 Flutter 直接把 Display P3 色域当做 sRGB 色域的图像处理了,而没有做色域转换,这一下就真相大白了~。

解决办法

文章中提到可以让原生来处理图片

CGImageSourceRef src = CGImageSourceCreateWithData((__bridge CFDataRef) imageData, NULL);
    NSUInteger frameCount = CGImageSourceGetCount(src);
    if (frameCount > 0) {
        NSDictionary *options = @{(__bridge NSString *)kCGImageSourceShouldCache : @YES,
                                  (__bridge NSString *)kCGImageSourceShouldCacheImmediately : @NO
                                  };
        NSDictionary *props = (NSDictionary *) CFBridgingRelease(CGImageSourceCopyPropertiesAtIndex(src, (size_t) 0, (__bridge CFDictionaryRef)options));
        NSString *profileName = [props objectForKey:(NSString *) kCGImagePropertyProfileName];
        if ([profileName isEqualToString:@"Display P3"]) {
            
            NSMutableData *data = [NSMutableData data];
            CGImageDestinationRef destRef = CGImageDestinationCreateWithData((__bridge CFMutableDataRef)data, kUTTypePNG, 1, NULL);
            
            NSMutableDictionary *properties = [NSMutableDictionary dictionary];
            properties[(__bridge NSString *)kCGImageDestinationLossyCompressionQuality] = @(1);
            properties[(__bridge NSString *)kCGImageDestinationEmbedThumbnail] = @(0);
            
            properties[(__bridge NSString *)kCGImagePropertyNamedColorSpace] = (__bridge id _Nullable)(kCGColorSpaceSRGB);
            properties[(__bridge NSString *)kCGImageDestinationOptimizeColorForSharing] = @(YES);
            
            CGImageDestinationAddImageFromSource(destRef, src, 0, (__bridge CFDictionaryRef)properties);
            
            CGImageDestinationFinalize(destRef);
            CFRelease(destRef);
            return data;
            
        }
    }
    
    return imageData;

这里偷懒了,因为找UI小姐姐让她切图的时候调整一下就可以了~,最后的解决方案是UI根据设计稿导出sRGB IEC61966-2.1类型的图片,同时这个图片的色值是向Display P3靠拢的,至此问题解决。

转载自:https://juejin.cn/post/7268539503907307520
评论
请登录