how to use react-native-skia as backend

[hungtooc]

Hi, can I use Skia to create/modify an "art" image and save it to file without showing it up?
specifically, I want to read a local image, modify it using Skia and save it to file .png, but unnecessary to show it on or .

[wcandillon]

We support gpu accelerated offscreen rendering but we don't have a public API for it yet.
Here are some relevant code snippets: https://github.com/Shopify/react-native-skia/blob/250cf9964fe2724961d09d2050554bc2361f3a45/package/src/renderer/__tests__/e2e/Offscreen.spec.tsx
Here is an example you could play with:

const offscreen = Skia.Surface.MakeOffscreen(ctx.width, ctx.height);
if (!offscreen) {
 throw new Error("Couldn't load the image");
}
const canvas = offscreen.getCanvas();
canvas.drawImage(....) // draw your image
// Draw
offscreen.flush();
// Get the image
offscreen.makeImageSnapshot()

[RinatRezyapov]

Can you draw offscreen canvas into main canvas directly?

Also tried to draw offscreen canvas as image but it didn't work:

  const onDraw = useDrawCallback((canvas: SkCanvas, drawingInfo) => {
    const offscreen = Skia.Surface.MakeOffscreen(1000, 1000);
    if (!offscreen) {
      throw new Error("Couldn't load the image");
    }
    const offscreenCanvas = offscreen.getCanvas();
    initHexPathMap(offscreenCanvas, drawingInfo.width, drawingInfo.height);
    canvas.drawImage(offscreen.makeImageSnapshot(), 0 ,0)
  });

[RinatRezyapov]

Ok, I changed Skia.Surface.MakeOffscreen to Skia.Surface.Make (as @hungtooc suggested) and it worked. I'm using the "@shopify/react-native-skia": "^0.1.176" (latest at this moment). Seems like MakeOffscreen is not working right now.

The only question that is left - If there are any performance implications when you convert offscreen canvas to image to draw it to another canvas and is it any different from drawning offscreen canvas diresctly into main canvas (like it can be done in HTML Canvas)?

[hungtooc]

Ok, I changed Skia.Surface.MakeOffscreen to Skia.Surface.Make (as @hungtooc suggested) and it worked. I'm using the "@shopify/react-native-skia": "^0.1.176" (latest at this moment). Seems like MakeOffscreen is not working right now.

The only question that is left - If there are any performance implications when you convert offscreen canvas to image to draw it to another canvas and is it any different from drawning offscreen canvas diresctly into main canvas (like it can be done in HTML Canvas)?
Hi @RinatRezyapov, when I upgrade version to 0.1.176 I could use MakeOffscreen.
It could optimize performance and/or user experience in some case of application. You can show canvas to screen with fit to screen's resolution and export your cavas with higher resolution (by creating new object with higher resolution using Skia.Surface.MakeOffscreen and save it).

[wcandillon]

@RinatRezyapov It sounds like there might be a bug on our side, would you like to file a bug report for it? If you have an easy to reproduce example, that would be great.

[stemyke]

In latest versions, I can use it like this to make it available on screen:

const gpuImage = surface.makeImageSnapshot();
const displayImage = gpuImage.makeNonTextureImage();

Is that correct @wcandillon ?