Class ImageHelper

A helper class to provide common functionality for working with Image objects.

Methods

canvasToBase64 compositeCanvasTexture createThumbnail hasImageExtension pixelsToCanvas pixiToBase64 textureToImage uploadBase64

Methods

StaticcanvasToBase64

  • canvasToBase64(
        canvas: HTMLCanvasElement,
        type?: string,
        quality?: number,
    ): Promise<string>

    Asynchronously convert a canvas element to base64.

    Parameters

    • canvas: HTMLCanvasElement
    • Optionaltype: string
    • Optionalquality: number

    Returns Promise<string>

    The base64 string of the canvas.

StaticcompositeCanvasTexture

  • compositeCanvasTexture(
        object: DisplayObject,
        options?: {
            center?: boolean;
            height?: number;
            tx?: number;
            ty?: number;
            width?: number;
        },
    ): Texture<Resource>

    Composite a canvas object by rendering it to a single texture

    Parameters

    • object: DisplayObject

      The object to render to a texture

    • Optionaloptions: { center?: boolean; height?: number; tx?: number; ty?: number; width?: number } = {}

      Options which configure the resulting texture

      • Optionalcenter?: boolean

        Center the texture in the rendered frame?

      • Optionalheight?: number

        The desired height of the output texture

      • Optionaltx?: number

        A horizontal translation to apply to the object

      • Optionalty?: number

        A vertical translation to apply to the object

      • Optionalwidth?: number

        The desired width of the output texture

    Returns Texture<Resource>

    The composite Texture object

StaticcreateThumbnail

  • createThumbnail(
        src: string | DisplayObject,
        options: {
            center?: boolean;
            format?: string;
            height?: number;
            quality?: number;
            tx?: number;
            ty?: number;
            width?: number;
        },
    ): Promise<object>

    Create thumbnail preview for a provided image path.

    Parameters

    • src: string | DisplayObject

      The URL or display object of the texture to render to a thumbnail

    • options: {
          center?: boolean;
          format?: string;
          height?: number;
          quality?: number;
          tx?: number;
          ty?: number;
          width?: number;
      }

      Additional named options passed to the compositeCanvasTexture function

      • Optionalcenter?: boolean

        Whether to center the object within the thumbnail

      • Optionalformat?: string

        The desired output image format

      • Optionalheight?: number

        The desired height of the resulting thumbnail

      • Optionalquality?: number

        The desired output image quality

      • Optionaltx?: number

        A horizontal transformation to apply to the provided source

      • Optionalty?: number

        A vertical transformation to apply to the provided source

      • Optionalwidth?: number

        The desired width of the resulting thumbnail

    Returns Promise<object>

    The parsed and converted thumbnail data

StatichasImageExtension

  • hasImageExtension(src: string): boolean

    Test whether a source file has a supported image extension type

    Parameters

    • src: string

      A requested image source path

    Returns boolean

    Does the filename end with a valid image extension?

StaticpixelsToCanvas

  • pixelsToCanvas(
        pixels: Uint8ClampedArray,
        width: number,
        height: number,
        options?: { eh?: number; element?: HTMLCanvasElement; ew?: number },
    ): HTMLCanvasElement

    Create a canvas element containing the pixel data.

    Parameters

    • pixels: Uint8ClampedArray

      Buffer used to create the image data.

    • width: number

      Buffered image width.

    • height: number

      Buffered image height.

    • options: { eh?: number; element?: HTMLCanvasElement; ew?: number } = {}
      • Optionaleh?: number

        Specified height for the element (default to buffer image height).

      • Optionalelement?: HTMLCanvasElement

        The element to use.

      • Optionalew?: number

        Specified width for the element (default to buffer image width).

    Returns HTMLCanvasElement

StaticpixiToBase64

  • pixiToBase64(
        target: DisplayObject,
        type: string,
        quality: number,
    ): Promise<string>

    Asynchronously convert a DisplayObject container to base64 using Canvas#toBlob and FileReader

    Parameters

    • target: DisplayObject

      A PIXI display object to convert

    • type: string

      The requested mime type of the output, default is image/png

    • quality: number

      A number between 0 and 1 for image quality if image/jpeg or image/webp

    Returns Promise<string>

    A processed base64 string

StatictextureToImage

  • textureToImage(
        texture: Texture<Resource>,
        options?: { format?: string; quality?: number },
    ): Promise<string>

    Extract a texture to a base64 PNG string

    Parameters

    • texture: Texture<Resource>

      The texture object to extract

    • options: { format?: string; quality?: number } = {}
      • Optionalformat?: string

        Image format, e.g. "image/jpeg" or "image/webp".

      • Optionalquality?: number

        JPEG or WEBP compression from 0 to 1. Default is 0.92.

    Returns Promise<string>

    A base64 png string of the texture

StaticuploadBase64

  • uploadBase64(
        base64: string,
        fileName: string,
        filePath: string,
        options?: { notify?: boolean; storage?: string; type?: string },
    ): Promise<object>

    Upload a base64 image string to a persisted data storage location

    Parameters

    • base64: string

      The base64 string

    • fileName: string

      The file name to upload

    • filePath: string

      The file path where the file should be uploaded

    • Optionaloptions: { notify?: boolean; storage?: string; type?: string } = {}

      Additional options which affect uploading

      • Optionalnotify?: boolean

        Display a UI notification when the upload is processed.

      • Optionalstorage?: string

        The data storage location to which the file should be uploaded

      • Optionaltype?: string

        The MIME type of the file being uploaded

    Returns Promise<object>

    A promise which resolves to the FilePicker upload response

Settings

Member Visibility

On This Page

Methods