zCanvas.loader

Loader

Loader is a helper class that provides convenience methods to load Images with a callback mechanism ensuring the loaded content is ready to be used in a Canvas context.

NOTE It is unlikely you will need to use Loader directly. You can manage all image assets to be rendered in your Canvas by registering resources instead.

Using loader

Loader exposes the following methods:

loadImage( source: string | Blob | File ) : Promise<{ image: HTMLImageElement, size: Size }>

Where source is either binary (in the form of a Blob or File reference), or a string. When a string, its value can represent either:

• a base64 encoded representation of an Image
• a path to a file on a remote/local origin*
• a path to a Blob URL

The method is async and resolves as soon as the image is loaded as an HTMLImageElement_and ready for rendering_. Apart from the generated image instance, the image dimensions are also returned in a Size object.

*Loader will also apply the correct crossOrigin-attribute onto the resulting HTMLImageElement when applicable (e.g. when source actually points to a URL on a server of a different origin).

NOTE (!) When storing Images on a CDN, ensure that the correct Cross Origin (CORS) headers are provided when accessing the Images, otherwise the zCanvas is not allowed to perform operations on the Image.

loadBitmap( source: string | Blob | File ): Promise<ImageBitmap>

Same as loadImage except that an ImageBitmap instance is returned (the image format used internally by the zCanvas renderer).

isReady( image: HTMLImageElement ): boolean

Verifies whether given image is ready for rendering.

onReady( image: HTMLImageElement ): Promise<void>

Resolves as soon as provided image is ready for rendering.