How can I zoom Images in Canvas without losing quality?

[wDRxxx]

Hello,
How can I zoom Images in Canvas without losing quality?
I want to zoom big images, but if I zoom it with simple RN Image or Skia image, I have very bad quality zoom.
I have tried to use rn-image-zoom and it's working bad with big images.
Hope for help, thanks

[Volper212]

Here are the steps:

1. Get the image's width and height in pixels.
2. Convert the px width and height to dp (the unit used by React Native styles).
3. Make sure the Skia canvas has its width and height equal to those values (it should be bigger than the viewport for large images). Keep in mind it may be bigger than the container, so you need to adjust the style to support that.
4. Have it zoomed in to fit in the container by default.

If you run into trouble implementing this, contact me.

[Glazzes]

You can try out my library, I've built it around use cases like this one. In the docs you can check out the How to use with Skia Components guide.

[maxmusiichuk]

Hi, found your library and try to use it inside of skia canvas, current task to create collage with some skewed images inside dynamically, because in example in docs in styles position set to absolute, and it covers other image. Is this possible to set cover overlay automaticaly for each of images?

[Glazzes]

@maxmusiichuk Sorry for the late response, Github does not notify a damn thing, could you explain yourself in more detail? I didn't really understood what you meant by "cover overlay for each image"

[Volper212]

@openspacelabs/react-native-zoomable-view is also a library you can use.