Class ImgClip

图像素材，支持动图

普通文字可通过 renderTxt2ImgBitmap 转换成图片素材

Example

new ImgClip((await fetch('<img url>')).body);

Example

new ImgClip(
  await renderTxt2ImgBitmap(
    '水印',
   `font-size:40px; color: white; text-shadow: 2px 2px 6px red;`,
  )
)

See

视频合成

Implements

Constructors

constructor

Properties

#frames #img #meta ready tickInterceptor

Accessors

meta

Methods

#initAnimateImg clone destroy split tick

Constructors

constructor

  • new ImgClip(dataSource): ImgClip

  • 静态图片可使用流、ImageBitmap 初始化

    动图需要使用 VideoFrame[] 或提供图片类型

    Parameters

    • dataSource: ImageBitmap | VideoFrame[] | ReadableStream<any> | {
          stream: ReadableStream<any>;
          type: "image/png" | "image/avif" | "image/webp" | "image/gif";
      }

    Returns ImgClip

Properties

Private #frames

#frames: VideoFrame[] = []

Private #img

#img: null | ImageBitmap = null

Private #meta

#meta: {
    duration: number;
    height: number;
    width: number;
} = ...

Type declaration

  • duration: number
  • height: number
  • width: number

ready

ready: Promise<IClipMeta>

当素材准备完成，ready 会切换到 resolved 状态

tickInterceptor

tickInterceptor: (<T>(time, tickRet) => Promise<T>) = ...

Type declaration

    • <T>(time, tickRet): Promise<T>

    • Type Parameters

      • T extends {
            state: "success";
            video: ImageBitmap | VideoFrame;
        }

      Parameters

      • time: number
      • tickRet: T

      Returns Promise<T>

Accessors

meta

  • get meta(): {
        duration: number;
        height: number;
        width: number;
    }

  • ⚠️ 静态图片的 duration 为 Infinity

    使用 Sprite 包装时需要将它的 duration 设置为有限数

    Returns {
        duration: number;
        height: number;
        width: number;
    }

    • duration: number
    • height: number
    • width: number

Methods

Private #initAnimateImg

  • #initAnimateImg(stream, type): Promise<void>

  • Parameters

    • stream: ReadableStream<any>
    • type: "image/png" | "image/avif" | "image/webp" | "image/gif"

    Returns Promise<void>

clone

destroy

split

tick

  • tick(time): Promise<{
        state: "success";
        video: ImageBitmap | VideoFrame;
    }>

  • Parameters

    • time: number

    Returns Promise<{
        state: "success";
        video: ImageBitmap | VideoFrame;
    }>

Settings

Member Visibility

Theme

On This Page

constructor#frames#img#metareadytickInterceptormeta#initAnimateImgclonedestroysplittick