Make a part of the image transparent

[Themrpie]

Hello people. I'm trying to take an image and make a part of it transparent, is it possible with this library? I've been able to create part of the image to not be seen by adding a Mask or a Path, but haven't been able to make it transparent, is it possible?
OpenAI docs says the mask I need to send is:

An additional image whose fully transparent areas (e.g. where alpha is zero) indicate where image should be edited. Must be a valid PNG file, less than 4MB, and have the same dimensions as image.

Hopefully somebody can help.
Thanks

[hungtooc]

Hi @Themrpie
I don't fully understand what your problem is, but these lines of code may help you.
Additionally, there is documentation on how to use Mask , but many people still cannot use it

function App(): JSX.Element {
  const skimage = useImage('https://picsum.photos/200/300');
  // const svg = useSVG(require('./assert/svg/Vector.svg'));
  const ref = useCanvasRef();
  useEffect(() => {
    setTimeout(() => {
      // you can pass an optional rectangle
      // to only save part of the image
      const image = ref.current?.makeImageSnapshot();
      if (image) {
        // you can use image in an <Image> component
        // Or save to file using encodeToBytes -> Uint8Array
        const bytes = image.encodeToBase64(ImageFormat.PNG, 100);
        console.log(bytes)
      }
    }, 1000)
  });
  return (
    <SafeAreaView>
      <Canvas style={{width: 256, height: 256}} ref={ref}>
        <Mask
          mode="luminance"
          mask={
            <Group>
              <Fill color={'white'} />
              <Circle cx={128} cy={128} r={64} />
            </Group>
          }>
          <Image
            image={skimage}
            fit="contain"
            x={0}
            y={0}
            width={256}
            height={256}
          />
        </Mask>
      </Canvas>
    </SafeAreaView>
  );
}

[Themrpie]

My problem is that mask simply don't allow you to see a part of the image.
What I need is to modify the image so a part of it is transparent, meaning that you can see through the image.

I was able to use Mask but it simply "hides" a part of the image and don't allow me to see though, it looks like this:

I'm attaching a video of what I should see So if you have a red backgroundcolor and you put an Image on top, you should be able to see the background color below the image.

Grabacion.de.pantalla.2023-10-10.a.la.s.15.39.37.mov

Basically what I need is to do this very same thing:
https://ai-image-editor.netlify.app/

[hungtooc]

<Canvas style={{width: 256, height: 256}} ref={ref}>
  <Line p1={{x: 0, y: 0}} p2={{x: 256, y: 256}} strokeWidth={5} color={'red'}/>
  <Mask
    mode="luminance"
    mask={
      <Group>
        <Fill color={'white'} />
        <Circle cx={128} cy={128} r={64} />
      </Group>
    }>
    <Image
      image={skimage1}
      fit="contain"
      x={0}
      y={0}
      width={256}
      height={256}
    />
  </Mask>
</Canvas>

[Themrpie]

Thank you, but that would simply draw with color red so it seems like if the image was transparent but it's not.

I need that the image is actually transparent, so you can see whatever is behind it. This is the equivalent of taking some pixels and set their alpha value to 0. The idea is to use the new image as input for openai image edits.
I know it can be done with React because this webapp does exactly what I need, but haven't been able to find how: https://ai-image-editor.netlify.app/

[hungtooc]

checkout my first code that encoded image to png

[Themrpie]

thank you very much, in order to see the transparency in the app I had to convert into png, now it's working perfectly.