Possible to retain the quality of the image when zooming?

ascoders / react-native-image-zoom

react native image pan and zoom

MIT License

639 stars 282 forks source link

Possible to retain the quality of the image when zooming? #84

Open codeplaygoa opened 5 years ago

codeplaygoa commented 5 years ago

I have image with small text in it. The image itself is hd so normally on zooming the text can be readable. But with react-native-image-zoom the image is scaled from the mentioned dimension of the Image component. Is it possible to zoom first to the maximum size of the original image and then starts scaling? Here you can see the text is getting blurred as you zoom https://snack.expo.io/rylljGstV

augustofontes commented 5 years ago

asasouza commented 5 years ago

VadimCpp commented 5 years ago

LeoUrushi commented 5 years ago

+1 I have the same problem.

harry-harish commented 5 years ago

@ascoders same issue. +1

philyboysmith commented 5 years ago

LeoUrushi commented 5 years ago

It looks like iOS version does decent job in retaining image quality. But on Android, it gets very blurry.

sajjadintel commented 5 years ago

torchsmith commented 4 years ago

johnlim5847 commented 4 years ago

is there a fix for this issue? or you guys found another image zoom library?

deprolou commented 4 years ago

Facing the same exact issue, we cant figure out how to apply a workaround for this.

johnlim5847 commented 4 years ago

@ArtemKolichenkov Thanks for your hard work on the latest release! May I know will this issue be fixed in the upcoming release?

ArtemKolichenkov commented 4 years ago

@johnlim5847 I will work on this issue today. Hopefully will find the solution quickly 😅

ArtemKolichenkov commented 4 years ago

So I'm just gonna dump my findings here:

This is likely related mostly to .png images.
It was already like this couple of years ago in RN 0.57 (https://github.com/facebook/react-native/issues/21301)
This issues goes deeper into RN dependency Fresco (https://github.com/facebook/fresco/issues/2397). There is some PR there but idk if/when its gonna be merged/tested.
maybe https://github.com/DylanVann/react-native-fast-image can solve the issue. We might try using that, although I need to check if that would be backwards-compatible and if it will actually solve the issue. They started supporting bundled assets so there shouldn't be any drawbacks from using them, although I need to check. (This seems like breaking change though the more I think about so eh.... idk).
here's StackOverflow question about this issue.

queizy-sartori commented 4 years ago

After being stuck with this problem for some time I ended up finding a workaround that solved the quality problem for Android in my case. My solution was to get the current scale from the react-native-image-zoom through the onMove({scale}) method and multiply the height and width values of my image. Here's an example:

<ImageZoom 
        enableDoubleClickZoom={false}           
        onMove={this.onMoveZoom}
        cropWidth={cropWidth}
        cropHeight={cropHeight}
         imageWidth={cropWidth * this.state.currentScale}
         imageHeight={cropHeight * this.state.currentScale}>
            <Image 
               style={{
                  width: cropWidth * this.state.currentScale, 
                  height: cropHeight * this.state.currentScale, 
               }}
               source={{uri: YOUR_URI}} 
               resizeMode="contain"/>
</ImageZoom>

I hope this helps.

mohamedosamakj commented 4 years ago

check out this zoomable image component on stackoverflow could be helpful https://stackoverflow.com/a/37449923/11838322

evanjmg commented 3 years ago

Still no solution in 2021 with latest and increasing size does not work, nor does FastImage