Image

The Image class is the spiritual equivalent of the HTMLImageElement class in web browsers. You can use it to load image data from the filesytem or remote source over the network. Once loaded, the image may be drawn onto the screen context or an offscreen canvas context using ctx.drawImage().

Supported Image Formats

jpg - JPEG image data using libjpeg-turbo
png - PNG image data using libpng
webp - WebP image data using libpng

Example

const ctx = screen.getContext('2d');
 
const img = new Image();
img.addEventListener('load', () => {
  ctx.drawImage(img);
});
img.src = 'romfs:/logo.png';

Extends

EventTarget

Constructors

new Image()

new Image(): Image

Returns

Image

Overrides

EventTarget.constructor

Properties

Property	Modifier	Type	Default value
`className`	`public`	`string`	`''`
`decoding`	`public`	`"auto"` \| `"async"` \| `"sync"`	`undefined`
`height`	`readonly`	`number`	`undefined`
`isMap`	`public`	`boolean`	`undefined`
`loading`	`public`	`"eager"` \| `"lazy"`	`undefined`
`onerror`	`public`	`null` \| (`this`, `ev`) => `any`	`undefined`
`onload`	`public`	`null` \| (`this`, `ev`) => `any`	`undefined`
`width`	`readonly`	`number`	`undefined`

Accessors

complete

get complete(): boolean

Returns

boolean

naturalHeight

get naturalHeight(): number

Returns

number

naturalWidth

get naturalWidth(): number

Returns

number

nodeName

get nodeName(): string

Returns

string

nodeType

get nodeType(): number

Returns

number

src

get src(): string

set src(val): void

Parameters

Parameter	Type
`val`	`string`

Returns

string

Methods

addEventListener()

addEventListener(type, callback, options?): void

Appends an event listener for events whose type attribute value is type. The callback argument sets the callback that will be invoked when the event is dispatched.

The options argument sets listener-specific options. For compatibility this can be a boolean, in which case the method behaves exactly as if the value was specified as options's capture.

When set to true, options's capture prevents callback from being invoked when the event's eventPhase attribute value is BUBBLING_PHASE. When false (or not present), callback will not be invoked when event's eventPhase attribute value is CAPTURING_PHASE. Either way, callback will be invoked if event's eventPhase attribute value is AT_TARGET.

When set to true, options's passive indicates that the callback will not cancel the event by invoking preventDefault(). This is used to enable performance optimizations described in § 2.8 Observing event listeners.

When set to true, options's once indicates that the callback will only be invoked once after which the event listener will be removed.

If an AbortSignal is passed for options's signal, then the event listener will be removed when signal is aborted.

The event listener is appended to target's event listener list and is not appended if it has the same type, callback, and capture.

Parameters

Parameter	Type
`type`	`string`
`callback`	`null` \| `EventListenerOrEventListenerObject`<`any`>
`options`?	`boolean` \| `AddEventListenerOptions`

Parameter	Type
`event`	`Event`

Parameter	Type
`name`	`string`

Parameter	Type
`type`	`string`
`callback`	`null` \| `EventListenerOrEventListenerObject`<`any`>
`options`?	`boolean` \| `EventListenerOptions`

Parameter	Type
`name`	`string`
`value`	`string` \| `number`

Returns

void

Image

On this page