Class ImageHelper

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

Index

Methods

canvasToBase64 compositeCanvasTexture createThumbnail hasImageExtension pixelsToCanvas pixiToBase64 textureToImage uploadBase64

Methods

`Static`canvasToBase64

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.

`Static`compositeCanvasTexture

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

`Static`createThumbnail

createThumbnail(
    src: string | DisplayObject,
    options: {
        center?: boolean;
        format?: string;
        height?: number;
        quality?: number;
        tx?: number;
        ty?: number;
        width?: number;
    },
): Promise<
    | {
        format: string;
        height: number;
        quality: number;
        thumb: string;
        width: number;
    }
    | null,
>
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. Default: "image/webp".
  - Optionalheight?: number
    The desired height of the resulting thumbnail
  - Optionalquality?: number
    The desired output image quality. Default: 0.8.
  - 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<
    | {
        format: string;
        height: number;
        quality: number;
        thumb: string;
        width: number;
    }
    | null,
>
The parsed and converted thumbnail data.

`Static`hasImageExtension

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?

`Static`pixelsToCanvas

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

`Static`pixiToBase64

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

`Static`textureToImage

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

`Static`uploadBase64

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

Class ImageHelper

Index

Methods

Methods

StaticcanvasToBase64

Parameters

Returns Promise<string>

StaticcompositeCanvasTexture

Parameters

Optionalcenter?: boolean

Optionalheight?: number

Optionaltx?: number

Optionalty?: number

Optionalwidth?: number

Returns Texture<Resource>

StaticcreateThumbnail

Parameters

Optionalcenter?: boolean

Optionalformat?: string

Optionalheight?: number

Optionalquality?: number

Optionaltx?: number

Optionalty?: number

Optionalwidth?: number

Returns Promise< | { format: string; height: number; quality: number; thumb: string; width: number; } | null,>

StatichasImageExtension

Parameters

Returns boolean

StaticpixelsToCanvas

Parameters

Optionaleh?: number

Optionalelement?: HTMLCanvasElement

Optionalew?: number

Returns HTMLCanvasElement

StaticpixiToBase64

Parameters

Returns Promise<string>

StatictextureToImage

Parameters

Optionalformat?: string

Optionalquality?: number

Returns Promise<string>

StaticuploadBase64

Parameters

Optionalnotify?: boolean

Optionalstorage?: string

Optionaltype?: string

Returns Promise<object>

Settings

On This Page

`Static`canvasToBase64

`Static`compositeCanvasTexture

`Optional`center?: boolean

`Optional`height?: number

`Optional`tx?: number

`Optional`ty?: number

`Optional`width?: number

`Static`createThumbnail

`Optional`center?: boolean

`Optional`format?: string

`Optional`height?: number

`Optional`quality?: number

`Optional`tx?: number

`Optional`ty?: number

`Optional`width?: number

Returns Promise<
| {
format: string;
height: number;
quality: number;
thumb: string;
width: number;
}
| null,
>

`Static`hasImageExtension

`Static`pixelsToCanvas

`Optional`eh?: number

`Optional`element?: HTMLCanvasElement

`Optional`ew?: number

`Static`pixiToBase64

`Static`textureToImage

`Optional`format?: string

`Optional`quality?: number

`Static`uploadBase64

`Optional`notify?: boolean

`Optional`storage?: string

`Optional`type?: string