Skip to content

Commit 6687c84

Browse files
committed
[Image] Really improve the quality of mis-sized images w/trilinear filtering
Summary: Images whose intrinsic dimensions don't match the view's dimensions suffer from jaggies. Applying `kCAFilterTrilinear` makes this way better. If you accurately size your images then there's no difference, good job (y) I left GIFs using the default linear filtering since they are more intensive to begin with and GIFs are generally for animation these days anyway. Closes facebook#95 Github Author: James Ide <[email protected]> Test Plan: Imported from GitHub, without a `Test Plan:` line.
1 parent 46981fc commit 6687c84

File tree

2 files changed

+8
-0
lines changed

2 files changed

+8
-0
lines changed

ReactKit/Views/RCTNetworkImageView.m

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,8 @@ - (void)setImageURL:(NSURL *)imageURL resetToDefaultImageWhileLoading:(BOOL)rese
5252
if (reset) {
5353
self.layer.contentsScale = _defaultImage.scale;
5454
self.layer.contents = (__bridge id)_defaultImage.CGImage;
55+
self.layer.minificationFilter = kCAFilterTrilinear;
56+
self.layer.magnificationFilter = kCAFilterTrilinear;
5557
}
5658
if ([imageURL.pathExtension caseInsensitiveCompare:@"gif"] == NSOrderedSame) {
5759
_downloadToken = [_imageDownloader downloadDataForURL:imageURL block:^(NSData *data, NSError *error) {
@@ -61,6 +63,8 @@ - (void)setImageURL:(NSURL *)imageURL resetToDefaultImageWhileLoading:(BOOL)rese
6163
self.layer.bounds = CGRectMake(0, 0, CGImageGetWidth(firstFrame), CGImageGetHeight(firstFrame));
6264
self.layer.contentsScale = 1.0;
6365
self.layer.contentsGravity = kCAGravityResizeAspect;
66+
self.layer.minificationFilter = kCAFilterLinear;
67+
self.layer.magnificationFilter = kCAFilterLinear;
6468
[self.layer addAnimation:animation forKey:@"contents"];
6569
}
6670
// TODO: handle errors

ReactKit/Views/RCTStaticImage.m

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ - (void)_updateImage
2020
if (!UIEdgeInsetsEqualToEdgeInsets(UIEdgeInsetsZero, _capInsets)) {
2121
image = [image resizableImageWithCapInsets:_capInsets resizingMode:UIImageResizingModeStretch];
2222
}
23+
24+
// Apply trilinear filtering to smooth out mis-sized images
25+
self.layer.minificationFilter = kCAFilterTrilinear;
26+
self.layer.magnificationFilter = kCAFilterTrilinear;
2327

2428
super.image = image;
2529
}

0 commit comments

Comments
 (0)