HTMLImageElement

Introduction

Some applications require precise formatting on the screen, including formatting that can only be done when the size of graphic resources, such as images, is known in advance. This is a challenge when the resources are external, such as images present within an RSS data source or when building a generic Fusion Style Pack. To support this use case, the HMP implements the HTMLImageElement interface of the HTML5 standard to query information on the dimension of graphic resources.

This API was experimentally introduced within firmware 3.0.0 and stabilized within firmware 3.1.0.

Description

The HTMLImageElement interface is accessed via the global JavaScript Image constructor, for instance:

var img = new Image();

It works asynchronously and will call an onload callback provided by the user script when the size of the resource has been determined. Optionally an onerror callback may be provided as well to be notified of cases when the size of the resource cannot be determined.

To use the HTMLImageElement interface:

1. Create a new interface object by invoking the Image constructor.
2. Intall a onload handler.
3. Set the src attribute to the URI of a local or remote graphic resource.

Example

var img = new Image();
img.onload = function() {
   var w = this.width;
   var h = this.height;
   alert( 'The size of the W3C logo is '+ w +'x'+ h );
};
img.onerror = function() {
   alert( 'The size of the W3C logo cannot be determined.' );   
};
img.src = 'http://www.w3.org/2008/site/images/logo-w3c-mobile-lg';