Creating Image from Uint8Array

[frodriguez-hu]

Description

Hey, I'd like to know if it is possible to create an image from an Uint8Array. Uint8Array is the result of vision-camera-resize-plugin which I would like to draw on the frame using the new useSkiaFrameProcessor

[wcandillon]

closing as I am not seeing a but report here. but you can look at this example to create an image from Uint8Array data: https://github.com/Shopify/react-native-skia/blob/main/example/src/Examples/API/Data.tsx#L11

[frodriguez-hu]

Hey @wcandillon there is no any issue on skia, the problem is that I am not able to create the image using MakeImage from Skia

This is a better explanation of the issue:

Hey, I have been playing around and trying to render the output of resizing the frame but unfortunately my implementation is returning null and I am not completely sure why.

I have this:

const resized = resize(frame, {
      scale: {
        width: 256,
        height: 256
      },
      crop: {
        y: 0,
        x: 0,
        width: frame.width,
        height: frame.width
      },
      pixelFormat: 'rgb',
      dataType: 'uint8'
    });

    const data = Skia.Data.fromBytes(resized);
    const img = Skia.Image.MakeImage(
      {
        width: 256,
        height: 256,
        alphaType: AlphaType.Opaque,
        colorType: ColorType.RGBA_8888,
      },
      data,
      4 * resized.length
    )

I can't figure out what should be the right 3rd parameter of MakeImage. And I guess that is why it is returning an error

My final question is, what is the best way of calculating the 3rd param of Make Image, or the correct set up of it if the only thing I have is the resized array, (the UInt8Array)