[Question]: how to use with Skia canvas

[alwex]

Summary

Hello and thank you for this library, I would like to use ResumableZoom along with a Skia canvas, the idea is to be able to apply advanced filters using Skia to the images.

Everything works perfectly fine when using react native default image, but when using a Skia canvas, the starting scale is making the image not to fit within the screen dimension.

Here is the code and a video demonstrating the situation:

const ImageReaderSkiaPage: React.FC<Props> = () => {
  const image = useImage(uri)
  const { width, height } = useWindowDimensions()

  if (!image) {
    return null
  }

  const imageWidth = image.width()
  const imageHeight = image.height()

  return (
    <View style={[StyleSheet.absoluteFillObject]}>
      <ResumableZoom>
        <Canvas style={{ width: imageWidth, height: imageHeight }}>
          <Image
            image={image}
            fit="fitWidth"
            x={0}
            y={0}
            width={imageWidth}
            height={imageHeight}
          />
        </Canvas>
      </ResumableZoom>
    </View>
  )
}

Screen.Recording.2024-08-22.at.7.34.29.PM.mov

Clamping works perfectly fine, this is just the default scale which does not match with the screen.

Any idea, help?

Thank you

[Glazzes]

Hi there, you're asking your code to render a canvas with a size of 1920x1080 which of course does not fit within your device screen, you may like to get closer to example show in the docs and pay attention to getAspectRatioSize function, here is how it would look like more or less:

import React from 'react';
import { View, useWindowDimensions } from 'react-native';
import { Canvas, Image, useImage } from '@shopify/react-native-skia';
import { ResumableZoom, getAspectRatioSize, useImageResolution } from 'react-native-zoom-toolkit';

const uri = 'https://assets-global.website-files.com/63634f4a7b868a399577cf37/64665685a870fadf4bb171c2_labrador%20americano.jpg'

const App = () => {
  const { width } = useWindowDimensions();
  const image = useImage(uri);

  if(image === null) {
    return;
  }

  // An utility function to get the size without compromising the aspect ratio
  const imageSize = getAspectRatioSize({
    aspectRatio: image.width() / image.height(),
    width: width // It looks like you're using some padding, so take that into account
  })

  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <ResumableZoom>
        <Canvas style={{width: imageSize.width, height: imageSize.height}}>
          <Image image={image} x={0} y={0}  width={imageSize.width} height={imageSize.height} />
        </Canvas>
      </ResumableZoom>
    </View>
  )
}

export default App;

However I've just written a guide for the documentation detailing how to use both libraries together https://glazzes.github.io/react-native-zoom-toolkit/guides/skia.html

[alwex]

Thank you for your reply, this was my first attempt, but I decided not to use getAspectRatioSize as this is downscaling the canvas and downgrade the image quality when zooming (which is normal as the canvas has a lower resolution in this situation).

I see that you have updated the guide for using with Skia, I will try this approach, thank you again for your reactivity and this awesome library.

[Glazzes]

@alwex Someone already tried it and reported good results, hope you get the same results as well.

[Glazzes]

I'd take the other's dude experience as a positive outcome of the giude, however you're free to re-open the issue at any time if you're having any trouble.