无头模式

由于其离屏能力，React Native Skia 可以在 Node 上运行。这意味着您可以使用 Skia API 绘制可以编码并保存为图像的内容。默认情况下，绘图将在 CPU 上执行，但也可以使用GPU 加速。

你好，世界

您会在下面的示例中注意到，导入 URL 看起来与在 React Native 中使用的 URL 不同。这有两个原因。首先，由于 Node 程序不依赖于 Webpack 等模块打包器，因此您需要使用 React Native Skia 的 commonjs 构建。最后，我们希望在 Node 上导入我们需要的 Skia API，而不导入依赖于纯 React Native API 的 API。

tsx
import { LoadSkiaWeb } from "@shopify/react-native-skia/lib/commonjs/web/LoadSkiaWeb";
import { Fill, makeOffscreenSurface, drawOffscreen, getSkiaExports } from "@shopify/react-native-skia/lib/commonjs/headless";
(async () => {
  const width = 256;
  const height = 256;
  const r = size * 0.33;
  await LoadSkiaWeb();
  // Once that CanvasKit is loaded, you can access Skia via getSkiaExports()
  // Alternatively you can do const {Skia} = require("@shopify/react-native-skia")
  const {Skia} = getSkiaExports();
  const surface = makeOffscreenSurface(width, height);
  const image = drawOffscreen(surface,
    <Group blendMode="multiply">
      <Circle cx={r} cy={r} r={r} color="cyan" />
      <Circle cx={size - r} cy={r} r={r} color="magenta" />
      <Circle
        cx={size/2}
        cy={size - r}
        r={r}
        color="yellow"
      />
    </Group>);
  console.log(image.encodeToBase64());
  // Cleaning up CanvasKit resources
  image.dispose();
  surface.dispose();
})();

tsx
import { LoadSkiaWeb } from "@shopify/react-native-skia/lib/commonjs/web/LoadSkiaWeb";
import { Fill, makeOffscreenSurface, drawOffscreen, getSkiaExports } from "@shopify/react-native-skia/lib/commonjs/headless";
(async () => {
  const width = 256;
  const height = 256;
  const r = size * 0.33;
  await LoadSkiaWeb();
  // Once that CanvasKit is loaded, you can access Skia via getSkiaExports()
  // Alternatively you can do const {Skia} = require("@shopify/react-native-skia")
  const {Skia} = getSkiaExports();
  const surface = makeOffscreenSurface(width, height);
  const image = drawOffscreen(surface,
    <Group blendMode="multiply">
      <Circle cx={r} cy={r} r={r} color="cyan" />
      <Circle cx={size - r} cy={r} r={r} color="magenta" />
      <Circle
        cx={size/2}
        cy={size - r}
        r={r}
        color="yellow"
      />
    </Group>);
  console.log(image.encodeToBase64());
  // Cleaning up CanvasKit resources
  image.dispose();
  surface.dispose();
})();

GPU 加速

React Native Skia 依赖于OffscreenCanvas API 来支持 GPU 加速的离屏表面。这意味着，要从 GPU 加速中受益，您需要在 Node 上提供OffscreenCanvas API 的 polyfill。例如，这里是一个 OffScreenCanvas polyfill 实现，它依赖于使用 headless-gl 的 WebGL。

你好，世界​

GPU 加速​

你好，世界

GPU 加速