Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sampling issue with WebP #2507

Open
wcandillon opened this issue Jun 28, 2024 Discussed in #2449 · 2 comments · May be fixed by #2509
Open

Sampling issue with WebP #2507

wcandillon opened this issue Jun 28, 2024 Discussed in #2449 · 2 comments · May be fixed by #2509

Comments

@wcandillon
Copy link
Contributor

Discussed in #2449

Originally posted by natuanorg May 28, 2024
We are currently using React Native Skia for image rendering in our application and have noticed that the image quality is significantly lower compared to when using the expo-Image library.

Here is a sample code snippet for rendering an image using React Native Skia and expo-image to illustrate the issue:

const URI = 'https://i.ibb.co/D1rZQvR/2024.webp';
export const TestScreen = () => {
  const image = useImage(URI);
  if (image === null) {
    return null;
  }
  return (
    <View style={{flex: 1}}>
      <Canvas style={{flex: 1}}>
        <Image
          fit={'cover'}
          image={image}
          x={0}
          y={0}
          width={256}
          height={256}
        />
      </Canvas>
      <View style={{flex: 1}}>
        <EXImage source={URI} style={{width: 256, height: 256}} />
      </View>
    </View>
  );
};

Screenshot_20240528_224016

We are looking for guidance on how to improve image rendering quality using React Native Skia. Any insights, recommendations, or configurations that could help us achieve better quality would be greatly appreciated.

Thank you for your attention to this matter. We look forward to your support and suggestions.

@wcandillon wcandillon changed the title Sampling issue with Image transformations Sampling issue with WebP Jun 28, 2024
@wcandillon wcandillon linked a pull request Jun 28, 2024 that will close this issue
3 tasks
@wcandillon
Copy link
Contributor Author

@natuanorg I decided to expose a generic sampling option instead of just exposing the cubicSampling property.
This means that it will take me a bit more time to ship the feature.

In the meantime you can use the imperative API to achieve your use-case via the Picture API for instance and then using the following: https://github.com/Shopify/react-native-skia/pull/2509/files#diff-cb1e83aa96ec697ad2b3321dee44b5c8828de866df1f2886a4d67e80f4bfd431R48

If you are willing to contribute to the project, that would also be an option.

@natuanorg
Copy link

@wcandillon We have resolved the low image quality issue by using offscreen canvas to render and export images. Thank you for your support!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants