search

DylanVann / react-native-fast-image

🚩 FastImage, performant React Native image component.
MIT License
8.09k stars 1.47k forks source link

Fix: Bitmap transformation with size limit #1017

Closed chrispader closed 3 months ago

chrispader commented 7 months ago

Original PR by @ArekChr: https://github.com/Expensify/react-native-fast-image/pull/6

This pull request introduces a new transformation method for handling Bitmap objects with a size limit. It provides an implementation that scales down the input Bitmap if its byte count exceeds the specified threshold.

This pull request addresses an issue encountered when dealing with large images on Android devices with hardware acceleration enabled. The issue manifests as a java.lang.RuntimeException: Canvas: trying to draw too large(xxx,xxx,xxx bytes) bitmap error. By introducing a new transformation method, this pull request offers a solution to display large images while still accommodating the specified size limit.

Changes Made:

Added a new class ResizeTransformation, transform, to perform the Bitmap transformation. The transform method uses a BitmapPool, the transform Bitmap, and output width and height as parameters. If the transform Bitmap's byte count exceeds the predefined MAX_BYTES threshold: A scaling factor is calculated based on the square root of the ratio between MAX_BYTES and the transform Bitmap's byte count. The new width and height are computed by multiplying the output width and height by the scaling factor. The Bitmap.createScaledBitmap() method creates a scaled Bitmap with new dimensions. The scaled Bitmap is returned as the result of the transformation. If the transform Bitmap's byte count is within the MAX_BYTES threshold: The original toTransform Bitmap is returned as it is.

Overall, this pull request aims to provide a reusable and efficient Bitmap transformation implementation that handles size limitations, allowing for optimized memory usage when working with large images.

Related issues: https://github.com/Expensify/App/issues/17427 https://github.com/Expensify/App/issues/18963

cbjs commented 7 months ago

nice!

Julesssss commented 5 months ago

Hi @chrispader. I'm interesting in trying to solve the Android large image crash for Expensify/App and it looks like this was a good candidate until recently. Is this still a possible fix, or has it become deprecated with the recent merging of Expo-Image?

chrispader commented 5 months ago

Hi @chrispader. I'm interesting in trying to solve the Android large image crash for Expensify/App and it looks like this was a good candidate until recently. Is this still a possible fix, or has it become deprecated with the recent merging of Expo-Image?

Yea, with react-native-fast-image this fixed the problem. I'd have to look into the expo-image code and see how it's possible there. But i think since they also use Glide, it shouldn't be a problem.

Julesssss commented 5 months ago

Hey agian @chrispader. I agree that this isn't necessary for us anymore. But we do have the same native Canvas crash with Expo-Image which I'm working on here.

chrispader commented 5 months ago

Hey agian @chrispader. I agree that this isn't necessary for us anymore. But we do have the same native Canvas crash with Expo-Image which I'm working on here.

i'm adding a comment in the issue there, because i'm not quite sure we mean the same thing.

numandev1 commented 4 months ago

@chrispader thanks

chrispader commented 3 months ago

Closing this PR since i don't think there's much traffic going on in this repo and this will probably not be merged anytime soon.

@Julesssss since we migrated to Expo-Image in Expensify, i don't think we're gonna need to keep this open either...