Class ImageHelper

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

Methods

createThumbnail hasImageExtension compositeCanvasTexture textureToImage pixiToBase64 canvasToBase64 uploadBase64 pixelsToCanvas

Methods

Static createThumbnail

  • createThumbnail(src, options): Promise<object>

  • Create thumbnail preview for a provided image path.

    Parameters

    • src: any

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

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

      Additional named options passed to the compositeCanvasTexture function

      • width: number

        The desired width of the resulting thumbnail

      • height: number

        The desired height of the resulting thumbnail

      • tx: number

        A horizontal transformation to apply to the provided source

      • ty: number

        A vertical transformation to apply to the provided source

      • center: boolean

        Whether to center the object within the thumbnail

      • format: string

        The desired output image format

      • quality: number

        The desired output image quality

    Returns Promise<object>

    The parsed and converted thumbnail data

Static hasImageExtension

  • hasImageExtension(src): 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?

Static compositeCanvasTexture

  • compositeCanvasTexture(object, options?): Texture

  • Composite a canvas object by rendering it to a single texture

    Parameters

    • object: DisplayObject

      The object to render to a texture

    • Optional options: {
          width: number;
          height: number;
          tx: number;
          ty: number;
          center: boolean;
      } = {}

      Options which configure the resulting texture

      • width: number

        The desired width of the output texture

      • height: number

        The desired height of the output texture

      • tx: number

        A horizontal translation to apply to the object

      • ty: number

        A vertical translation to apply to the object

      • center: boolean

        Center the texture in the rendered frame?

    Returns Texture

    The composite Texture object

Static textureToImage

  • textureToImage(texture, options?): Promise<string>

  • Extract a texture to a base64 PNG string

    Parameters

    • texture: Texture

      The texture object to extract

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

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

      • quality: number

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

    Returns Promise<string>

    A base64 png string of the texture

Static pixiToBase64

  • pixiToBase64(target, type, quality): 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

Static canvasToBase64

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

  • Asynchronously convert a canvas element to base64.

    Parameters

    • canvas: HTMLCanvasElement
    • Optional type: string
    • Optional quality: number

    Returns Promise<string>

    The base64 string of the canvas.

Static uploadBase64

  • uploadBase64(base64, fileName, filePath, options?): 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

    • Optional options: {
          storage: string;
          type: string;
          notify: boolean;
      } = {}

      Additional options which affect uploading

      • storage: string

        The data storage location to which the file should be uploaded

      • type: string

        The MIME type of the file being uploaded

      • notify: boolean

        Display a UI notification when the upload is processed.

    Returns Promise<object>

    A promise which resolves to the FilePicker upload response

Static pixelsToCanvas

  • pixelsToCanvas(pixels, width, height, options?): 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: {
          element: HTMLCanvasElement;
          ew: number;
          eh: number;
      } = {}
      • element: HTMLCanvasElement

        The element to use.

      • ew: number

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

      • eh: number

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

    Returns HTMLCanvasElement

Settings

Member Visibility

Theme

On This Page

createThumbnailhasImageExtensioncompositeCanvasTexturetextureToImagepixiToBase64canvasToBase64uploadBase64pixelsToCanvas