图像

加载图像

useImage

图像使用 useImage 钩子加载。此钩子返回一个 SkImage 实例，该实例可以传递给 Image 组件。

可以使用 require 语句或直接传递网络 URL 来加载图像。也可以使用命名图像从应用程序包中加载图像。

tsx
import { useImage } from "@shopify/react-native-skia";
// Loads an image from the JavaScript bundle
const image1 = useImage(require("./assets/oslo"));
// Loads an image from the network
const image2 = useImage("https://picsum.photos/200/300");
// Loads an image that was added to the Android/iOS bundle
const image3 = useImage("Logo");

tsx
import { useImage } from "@shopify/react-native-skia";
// Loads an image from the JavaScript bundle
const image1 = useImage(require("./assets/oslo"));
// Loads an image from the network
const image2 = useImage("https://picsum.photos/200/300");
// Loads an image that was added to the Android/iOS bundle
const image3 = useImage("Logo");

加载图像是一个异步操作，因此 useImage 钩子在图像完全加载之前将返回 null。您可以使用此行为来有条件地渲染 Image 组件，如下面的示例中所示。

该钩子还提供一个可选的错误处理程序作为第二个参数。

MakeImageFromEncoded

您还可以使用 MakeImageFromEncoded 手动创建图像实例。

tsx
import { Skia } from "@shopify/react-native-skia";
 
// A sample base64-encoded pixel
const data = Skia.Data.fromBase64("iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==");
const image = Skia.Image.MakeImageFromEncoded(data);

tsx
import { Skia } from "@shopify/react-native-skia";
 
// A sample base64-encoded pixel
const data = Skia.Data.fromBase64("iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==");
const image = Skia.Image.MakeImageFromEncoded(data);

MakeImage

MakeImage 允许您通过提供像素数据并指定格式来创建图像。

tsx
import { Skia, AlphaType, ColorType } from "@shopify/react-native-skia";
 
const pixels = new Uint8Array(256 * 256 * 4);
pixels.fill(255);
let i = 0;
for (let x = 0; x < 256; x++) {
  for (let y = 0; y < 256; y++) {
    pixels[i++] = (x * y) % 255;
  }
}
const data = Skia.Data.fromBytes(pixels);
const img = Skia.Image.MakeImage(
  {
    width: 256,
    height: 256,
    alphaType: AlphaType.Opaque,
    colorType: ColorType.RGBA_8888,
  },
  data,
  256 * 4
);

tsx
import { Skia, AlphaType, ColorType } from "@shopify/react-native-skia";
 
const pixels = new Uint8Array(256 * 256 * 4);
pixels.fill(255);
let i = 0;
for (let x = 0; x < 256; x++) {
  for (let y = 0; y < 256; y++) {
    pixels[i++] = (x * y) % 255;
  }
}
const data = Skia.Data.fromBytes(pixels);
const img = Skia.Image.MakeImage(
  {
    width: 256,
    height: 256,
    alphaType: AlphaType.Opaque,
    colorType: ColorType.RGBA_8888,
  },
  data,
  256 * 4
);

注意：上面代码示例中的嵌套 for 循环在循环条件中似乎有错误。它们应该循环到 256，而不是 256 * 4，因为像素数据数组已初始化为 256 * 256 * 4 个元素，表示一个 256x256 的图像，其中每个像素由 4 个字节 (RGBA) 表示。

useImage

useImage 只是一个用于加载图像数据的辅助函数。

图像组件

可以通过指定输出矩形以及图像应如何适应该矩形来绘制图像。

名称	类型	描述
image	SkImage	图像的实例。
x	number	目标图像的左侧位置。
y	number	目标图像的顶部位置。
width	number	目标图像的宽度。
height	number	目标图像的高度。
fit?	Fit	用于将图像放入矩形的方法。值可以是 contain、fill、cover、fitHeight、fitWidth、scaleDown 或 none（默认为 contain）。
sampling?	采样	用于采样图像的方法。请参阅（采样选项）。

示例

tsx
import { Canvas, Image, useImage } from "@shopify/react-native-skia";
 
const ImageDemo = () => {
  const image = useImage(require("./assets/oslo.jpg"));
  return (
    <Canvas style={{ flex: 1 }}>
      <Image image={image} fit="contain" x={0} y={0} width={256} height={256} />
    </Canvas>
  );
};

tsx
import { Canvas, Image, useImage } from "@shopify/react-native-skia";
 
const ImageDemo = () => {
  const image = useImage(require("./assets/oslo.jpg"));
  return (
    <Canvas style={{ flex: 1 }}>
      <Image image={image} fit="contain" x={0} y={0} width={256} height={256} />
    </Canvas>
  );
};

采样选项

sampling 属性允许您控制绘制图像时如何对其进行采样。使用立方采样以获得最佳质量：您可以使用默认的 sampling={CubicSampling}（默认为 { B: 0, C: 0 }）或您想要的任何值：sampling={{ B: 0, C: 0.5 }}。

您还可以使用滤镜模式（nearest 或 linear）和 mimap 模式（none、nearest 或 linear）。默认为 nearest。

tsx
import { Canvas, Image, useImage, CubicSampling, FilterMode, MipmapMode } from "@shopify/react-native-skia";
 
const ImageDemo = () => {
  const image = useImage(require("./assets/oslo.jpg"));
  return (
    <Canvas style={{ flex: 1 }}>
      <Image
        image={image}
        fit="contain"
        x={0}
        y={0}
        width={256}
        height={256}
        sampling={CubicSampling}
      />
      <Image
        image={image}
        fit="contain"
        x={0}
        y={0}
        width={256}
        height={256}
        sampling={{ filter: FilterMode.Nearest, mipmap: MipmapMode.Nearest }}
      />
    </Canvas>
  );
};

tsx
import { Canvas, Image, useImage, CubicSampling, FilterMode, MipmapMode } from "@shopify/react-native-skia";
 
const ImageDemo = () => {
  const image = useImage(require("./assets/oslo.jpg"));
  return (
    <Canvas style={{ flex: 1 }}>
      <Image
        image={image}
        fit="contain"
        x={0}
        y={0}
        width={256}
        height={256}
        sampling={CubicSampling}
      />
      <Image
        image={image}
        fit="contain"
        x={0}
        y={0}
        width={256}
        height={256}
        sampling={{ filter: FilterMode.Nearest, mipmap: MipmapMode.Nearest }}
      />
    </Canvas>
  );
};

fit="contain"

fit="cover"

fit="fill"

fit="fitHeight"

fit="fitWidth"

fit="scaleDown"

fit="none"

实例方法

名称	描述
height	返回图像的可能缩放高度。
width	返回图像的可能缩放宽度。
getImageInfo	返回图像的图像信息。
encodeToBytes	对图像像素进行编码，将结果作为 UInt8Array 返回。
encodeToBase64	对图像像素进行编码，将结果作为 base64 编码的字符串返回。
readPixels	读取图像像素，将结果作为 UInt8Array 或 Float32Array 返回