ol 7.5.1 → 8.0.0-dev.1692052111884

package/DataTile.d.ts

@@ -1,5 +1,5 @@
 /**
- * @typedef {HTMLImageElement|HTMLCanvasElement|HTMLVideoElement} ImageLike
+ * @typedef {HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|ImageBitmap} ImageLike
  */
 /**
  * @typedef {Uint8Array|Uint8ClampedArray|Float32Array|DataView} ArrayLike
@@ -24,7 +24,7 @@ export function asArrayLike(data: Data): ArrayLike | null;
  */
 export function toArray(image: ImageLike): Uint8ClampedArray;
 export default DataTile;
-export type ImageLike = HTMLImageElement | HTMLCanvasElement | HTMLVideoElement;
+export type ImageLike = HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap;
 export type ArrayLike = Uint8Array | Uint8ClampedArray | Float32Array | DataView;
 /**
  * Data that can be used with a DataTile.

package/DataTile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTile.d.ts","sourceRoot":"","sources":["DataTile.js"],"names":[],"mappings":"AAOA;;GAEG;AAEH;;GAEG;AAEH;;;GAGG;AAEH;;;GAGG;AACH,kCAHW,IAAI,GACH,SAAS,GAAC,IAAI,CAQzB;AAED;;;GAGG;AACH,kCAHW,IAAI,GACH,SAAS,GAAC,IAAI,CASzB;AAOD;;;GAGG;AACH,+BAHW,SAAS,GACR,iBAAiB,CAuB5B;;wBAnEY,gBAAgB,GAAC,iBAAiB,GAAC,gBAAgB;wBAInD,UAAU,GAAC,iBAAiB,GAAC,YAAY,GAAC,QAAQ;;;;mBAKlD,SAAS,GAAC,SAAS;;;;;eAmElB,OAAO,gBAAgB,EAAE,SAAS;;;;;kBACtB,QAAQ,IAAI,CAAC;;;;;;;;;;;;;;;;AAHvC;;;;;;;;;;;GAWG;AAEH;IACE;;OAEG;IACH,qBAFW,OAAO,EAiCjB;IAvBC;;;OAGG;IACH,gBAA6B;IAE7B;;;OAGG;IACH,cAAiB;IAEjB;;;OAGG;IACH,eAAkB;IAElB;;;OAGG;IACH,cAAiC;IAGnC;;;OAGG;IACH,WAFY,OAAO,WAAW,EAAE,IAAI,CAWnC;IAED;;;;OAIG;IACH,WAHY,IAAI,CAKf;IAED;;;;OAIG;IACH,YAHY,KAAK,CAKhB;CA0BF;iBA1LgB,WAAW"}
+{"version":3,"file":"DataTile.d.ts","sourceRoot":"","sources":["DataTile.js"],"names":[],"mappings":"AAOA;;GAEG;AAEH;;GAEG;AAEH;;;GAGG;AAEH;;;GAGG;AACH,kCAHW,IAAI,GACH,SAAS,GAAC,IAAI,CASzB;AAED;;;GAGG;AACH,kCAHW,IAAI,GACH,SAAS,GAAC,IAAI,CASzB;AAOD;;;GAGG;AACH,+BAHW,SAAS,GACR,iBAAiB,CAuB5B;;wBApEY,gBAAgB,GAAC,iBAAiB,GAAC,gBAAgB,GAAC,WAAW;wBAI/D,UAAU,GAAC,iBAAiB,GAAC,YAAY,GAAC,QAAQ;;;;mBAKlD,SAAS,GAAC,SAAS;;;;;eAoElB,OAAO,gBAAgB,EAAE,SAAS;;;;;kBACtB,QAAQ,IAAI,CAAC;;;;;;;;;;;;;;;;AAHvC;;;;;;;;;;;GAWG;AAEH;IACE;;OAEG;IACH,qBAFW,OAAO,EAiCjB;IAvBC;;;OAGG;IACH,gBAA6B;IAE7B;;;OAGG;IACH,cAAiB;IAEjB;;;OAGG;IACH,eAAkB;IAElB;;;OAGG;IACH,cAAiC;IAGnC;;;OAGG;IACH,WAFY,OAAO,WAAW,EAAE,IAAI,CAWnC;IAED;;;;OAIG;IACH,WAHY,IAAI,CAKf;IAED;;;;OAIG;IACH,YAHY,KAAK,CAKhB;CA0BF;iBA3LgB,WAAW"}

package/DataTile.js

@@ -6,7 +6,7 @@ import TileState from './TileState.js';
 import {createCanvasContext2D} from './dom.js';
 
 /**
- * @typedef {HTMLImageElement|HTMLCanvasElement|HTMLVideoElement} ImageLike
+ * @typedef {HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|ImageBitmap} ImageLike
  */
 
 /**
@@ -25,7 +25,8 @@ import {createCanvasContext2D} from './dom.js';
 export function asImageLike(data) {
   return data instanceof Image ||
     data instanceof HTMLCanvasElement ||
-    data instanceof HTMLVideoElement
+    data instanceof HTMLVideoElement ||
+    data instanceof ImageBitmap
     ? data
     : null;
 }

package/Image.d.ts

@@ -1,10 +1,34 @@
 /**
- * @param {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} image Image element.
+ * @param {import('./DataTile.js').ImageLike} image Image element.
  * @param {function():any} loadHandler Load callback function.
  * @param {function():any} errorHandler Error callback function.
  * @return {function():void} Callback to stop listening.
  */
-export function listenImage(image: HTMLCanvasElement | HTMLImageElement | HTMLVideoElement, loadHandler: () => any, errorHandler: () => any): () => void;
+export function listenImage(image: import('./DataTile.js').ImageLike, loadHandler: () => any, errorHandler: () => any): () => void;
+/**
+ * Loads an image.
+ * @param {HTMLImageElement} image Image, not yet loaded.
+ * @param {string} [src] `src` attribute of the image. Optional, not required if already present.
+ * @return {Promise<HTMLImageElement>} Promise resolving to an `HTMLImageElement`.
+ * @api
+ */
+export function load(image: HTMLImageElement, src?: string | undefined): Promise<HTMLImageElement>;
+/**
+ * @param {HTMLImageElement} image Image, not yet loaded.
+ * @param {string} [src] `src` attribute of the image. Optional, not required if already present.
+ * @return {Promise<HTMLImageElement>} Promise resolving to an `HTMLImageElement`.
+ */
+export function decodeFallback(image: HTMLImageElement, src?: string | undefined): Promise<HTMLImageElement>;
+/**
+ * Loads an image and decodes it to an `ImageBitmap` if `createImageBitmap()` is supported. Returns
+ * the laoded image otherwise.
+ * @param {HTMLImageElement} image Image, not yet loaded.
+ * @param {string} [src] `src` attribute of the image. Optional, not required if already present.
+ * @return {Promise<ImageBitmap|HTMLImageElement>} Promise resolving to an `ImageBitmap` or an
+ * `HTMLImageElement` if `createImageBitmap()` is not supported.
+ * @api
+ */
+export function decode(image: HTMLImageElement, src?: string | undefined): Promise<ImageBitmap | HTMLImageElement>;
 export default ImageWrapper;
 /**
  * A function that takes an {@link module :ol/Image~ImageWrapper} for the image and a
@@ -20,7 +44,41 @@ export default ImageWrapper;
  * post requests or - in general - through XHR requests, where the src of the
  * image element would be set to a data URI when the content is loaded.
  */
-export type LoadFunction = (arg0: ImageWrapper, arg1: string) => void;
+export type LoadFunction = (arg0: import("./Image.js").default, arg1: string) => void;
+export type ImageObject = {
+    /**
+     * Extent, if different from the requested one.
+     */
+    extent?: import("./extent.js").Extent | undefined;
+    /**
+     * Resolution, if different from the requested one.
+     * When x and y resolution are different, use the array type (`[xResolution, yResolution]`).
+     */
+    resolution?: import("./resolution.js").ResolutionLike | undefined;
+    /**
+     * Pixel ratio, if different from the requested one.
+     */
+    pixelRatio?: number | undefined;
+    /**
+     * Image.
+     */
+    image: import('./DataTile.js').ImageLike;
+};
+/**
+ * Loader function used for image sources. Receives extent, resolution and pixel ratio as arguments.
+ * The function returns an {@link import ("./DataTile.js").ImageLike image}, an
+ * {@link import ("./Image.js").ImageObject image object}, or a promise for the same.
+ * For loaders that generate images, the promise should not resolve until the image is loaded.
+ * If the returned image does not match the extent, resolution or pixel ratio passed to the loader,
+ * it has to return an {@link import ("./Image.js").ImageObject image object} with the `image` and the
+ * correct `extent`, `resolution` and `pixelRatio`.
+ */
+export type Loader = (arg0: import("./extent.js").Extent, arg1: number, arg2: number, arg3: ((arg0: HTMLImageElement, arg1: string) => void) | undefined) => import("./DataTile.js").ImageLike | ImageObject | Promise<import("./DataTile.js").ImageLike | ImageObject>;
+/**
+ * Loader function used for image sources. Receives extent, resolution and pixel ratio as arguments.
+ * The function returns a promise for an  {@link import ("./Image.js").ImageObject image object}.
+ */
+export type ImageObjectPromiseLoader = (arg0: import("./extent.js").Extent, arg1: number, arg2: number, arg3: ((arg0: HTMLImageElement, arg1: string) => void) | undefined) => import("./DataTile.js").ImageLike | ImageObject | Promise<import("./DataTile.js").ImageLike | ImageObject>;
 /**
  * A function that takes an {@link module:ol/Image~ImageWrapper} for the image and a
  * `{string}` for the src as arguments. It is supposed to make it so the
@@ -35,69 +93,110 @@ export type LoadFunction = (arg0: ImageWrapper, arg1: string) => void;
  * post requests or - in general - through XHR requests, where the src of the
  * image element would be set to a data URI when the content is loaded.
  *
- * @typedef {function(ImageWrapper, string): void} LoadFunction
+ * @typedef {function(import("./Image.js").default, string): void} LoadFunction
  * @api
  */
-declare class ImageWrapper extends ImageBase {
+/**
+ * @typedef {Object} ImageObject
+ * @property {import("./extent.js").Extent} [extent] Extent, if different from the requested one.
+ * @property {import("./resolution.js").ResolutionLike} [resolution] Resolution, if different from the requested one.
+ * When x and y resolution are different, use the array type (`[xResolution, yResolution]`).
+ * @property {number} [pixelRatio] Pixel ratio, if different from the requested one.
+ * @property {import('./DataTile.js').ImageLike} image Image.
+ */
+/**
+ * Loader function used for image sources. Receives extent, resolution and pixel ratio as arguments.
+ * The function returns an {@link import("./DataTile.js").ImageLike image}, an
+ * {@link import("./Image.js").ImageObject image object}, or a promise for the same.
+ * For loaders that generate images, the promise should not resolve until the image is loaded.
+ * If the returned image does not match the extent, resolution or pixel ratio passed to the loader,
+ * it has to return an {@link import("./Image.js").ImageObject image object} with the `image` and the
+ * correct `extent`, `resolution` and `pixelRatio`.
+ *
+ * @typedef {function(import("./extent.js").Extent, number, number, (function(HTMLImageElement, string): void)=): import("./DataTile.js").ImageLike|ImageObject|Promise<import("./DataTile.js").ImageLike|ImageObject>} Loader
+ * @api
+ */
+/**
+ * Loader function used for image sources. Receives extent, resolution and pixel ratio as arguments.
+ * The function returns a promise for an  {@link import("./Image.js").ImageObject image object}.
+ *
+ * @typedef {function(import("./extent.js").Extent, number, number, (function(HTMLImageElement, string): void)=): import("./DataTile.js").ImageLike|ImageObject|Promise<import("./DataTile.js").ImageLike|ImageObject>} ImageObjectPromiseLoader
+ */
+declare class ImageWrapper extends EventTarget {
     /**
      * @param {import("./extent.js").Extent} extent Extent.
-     * @param {number|undefined} resolution Resolution.
+     * @param {number|Array<number>|undefined} resolution Resolution. If provided as array, x and y
+     * resolution will be assumed.
      * @param {number} pixelRatio Pixel ratio.
-     * @param {string} src Image source URI.
-     * @param {?string} crossOrigin Cross origin.
-     * @param {LoadFunction} imageLoadFunction Image load function.
-     * @param {CanvasRenderingContext2D} [context] Canvas context. When provided, the image will be
-     *    drawn into the context's canvas, and `getImage()` will return the canvas once the image
-     *    has finished loading.
+     * @param {import("./ImageState.js").default|import("./Image.js").Loader} stateOrLoader State.
+     */
+    constructor(extent: import("./extent.js").Extent, resolution: number | Array<number> | undefined, pixelRatio: number, stateOrLoader: any | import("./Image.js").Loader);
+    /**
+     * @protected
+     * @type {import("./extent.js").Extent}
      */
-    constructor(extent: import("./extent.js").Extent, resolution: number | undefined, pixelRatio: number, src: string, crossOrigin: string | null, imageLoadFunction: LoadFunction, context?: CanvasRenderingContext2D | undefined);
+    protected extent: import("./extent.js").Extent;
     /**
      * @private
-     * @type {string}
+     * @type {number}
+     */
+    private pixelRatio_;
+    /**
+     * @protected
+     * @type {number|Array<number>|undefined}
      */
-    private src_;
+    protected resolution: number | Array<number> | undefined;
+    /**
+     * @protected
+     * @type {import("./ImageState.js").default}
+     */
+    protected state: any;
     /**
      * @private
-     * @type {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement}
+     * @type {import('./DataTile.js').ImageLike|null}
      */
     private image_;
     /**
-     * @private
-     * @type {CanvasRenderingContext2D}
+     * @protected
+     * @type {import("./Image.js").Loader}
      */
-    private context_;
+    protected loader: import("./Image.js").Loader;
     /**
-     * @private
-     * @type {?function():void}
+     * @protected
      */
-    private unlisten_;
+    protected changed(): void;
     /**
-     * @private
-     * @type {LoadFunction}
+     * @return {import("./extent.js").Extent} Extent.
      */
-    private imageLoadFunction_;
+    getExtent(): import("./extent.js").Extent;
     /**
-     * Tracks loading or read errors.
-     *
-     * @private
+     * @return {import('./DataTile.js').ImageLike} Image.
      */
-    private handleImageError_;
+    getImage(): import('./DataTile.js').ImageLike;
     /**
-     * Tracks successful image load.
-     *
-     * @private
+     * @return {number} PixelRatio.
      */
-    private handleImageLoad_;
+    getPixelRatio(): number;
     /**
-     * @param {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} image Image.
+     * @return {number|Array<number>} Resolution.
      */
-    setImage(image: HTMLCanvasElement | HTMLImageElement | HTMLVideoElement): void;
+    getResolution(): number | Array<number>;
     /**
-     * Discards event handlers which listen for load completion or errors.
-     *
-     * @private
+     * @return {import("./ImageState.js").default} State.
+     */
+    getState(): any;
+    /**
+     * Load not yet loaded URI.
+     */
+    load(): void;
+    /**
+     * @param {import('./DataTile.js').ImageLike} image The image.
+     */
+    setImage(image: import('./DataTile.js').ImageLike): void;
+    /**
+     * @param {number|Array<number>} resolution Resolution.
      */
-    private unlistenImage_;
+    setResolution(resolution: number | Array<number>): void;
 }
-import ImageBase from './ImageBase.js';
+import EventTarget from './events/Target.js';
 //# sourceMappingURL=Image.d.ts.map

package/Image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["Image.js"],"names":[],"mappings":"AA+KA;;;;;GAKG;AACH,mCALW,iBAAiB,GAAC,gBAAgB,GAAC,gBAAgB,qBACxC,GAAG,sBACH,GAAG,SACF,IAAI,CA2C1B;;;;;;;;;;;;;;;;kCAtMqB,YAAY,QAAE,MAAM,KAAG,IAAI;AAdjD;;;;;;;;;;;;;;;;GAgBG;AAEH;IACE;;;;;;;;;;OAUG;IACH,oBAVW,OAAO,aAAa,EAAE,MAAM,cAC5B,MAAM,GAAC,SAAS,cAChB,MAAM,OACN,MAAM,eACL,MAAM,4BACP,YAAY,kDAsDtB;IAtCC;;;OAGG;IACH,aAAe;IAEf;;;OAGG;IACH,eAAyB;IAKzB;;;OAGG;IACH,iBAAuB;IAEvB;;;OAGG;IACH,kBAAqB;IAQrB;;;OAGG;IACH,2BAA2C;IAsB7C;;;;OAIG;IACH,0BAIC;IAED;;;;OAIG;IACH,yBAOC;IAqBD;;OAEG;IACH,gBAFW,iBAAiB,GAAC,gBAAgB,GAAC,gBAAgB,QAK7D;IAED;;;;OAIG;IACH,uBAKC;CACF;sBAzKqB,gBAAgB"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["Image.js"],"names":[],"mappings":"AAkNA;;;;;GAKG;AACH,mCALW,OAAO,eAAe,EAAE,SAAS,qBACtB,GAAG,sBACH,GAAG,SACF,IAAI,CA2C1B;AAED;;;;;;GAMG;AACH,4BALW,gBAAgB,6BAEf,QAAQ,gBAAgB,CAAC,CAuBpC;AAED;;;;GAIG;AACH,sCAJW,gBAAgB,6BAEf,QAAQ,gBAAgB,CAAC,CAWpC;AAED;;;;;;;;GAQG;AACH,8BANW,gBAAgB,6BAEf,QAAQ,WAAW,GAAC,gBAAgB,CAAC,CAWhD;;;;;;;;;;;;;;;;kCAxSqB,OAAO,YAAY,EAAE,OAAO,QAAE,MAAM,KAAG,IAAI;;;;;;;;;;;;;;;;;;WAUnD,OAAO,eAAe,EAAE,SAAS;;;;;;;;;;;4BAYzB,OAAO,aAAa,EAAE,MAAM,QAAE,MAAM,QAAE,MAAM,QAAE,QAAU,gBAAgB,QAAE,MAAM,KAAG,IAAI,CAAC,iBAAI,OAAO,eAAe,EAAE,SAAS,GAAC,WAAW,GAAC,QAAQ,OAAO,eAAe,EAAE,SAAS,GAAC,WAAW,CAAC;;;;;8CAQhM,OAAO,aAAa,EAAE,MAAM,QAAE,MAAM,QAAE,MAAM,QAAE,QAAU,gBAAgB,QAAE,MAAM,KAAG,IAAI,CAAC,iBAAI,OAAO,eAAe,EAAE,SAAS,GAAC,WAAW,GAAC,QAAQ,OAAO,eAAe,EAAE,SAAS,GAAC,WAAW,CAAC;AA5CtN;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;;;GAOG;AAEH;;;;;;;;;;;GAWG;AAEH;;;;;GAKG;AAEH;IACE;;;;;;OAMG;IACH,oBANW,OAAO,aAAa,EAAE,MAAM,cAC5B,MAAM,GAAC,MAAM,MAAM,CAAC,GAAC,SAAS,cAE9B,MAAM,iBACN,MAAkC,OAAO,YAAY,EAAE,MAAM,EAyCvE;IApCC;;;OAGG;IACH,kBAFU,OAAO,aAAa,EAAE,MAAM,CAElB;IAEpB;;;OAGG;IACH,oBAA6B;IAE7B;;;OAGG;IACH,sBAFU,MAAM,GAAC,MAAM,MAAM,CAAC,GAAC,SAAS,CAEZ;IAE5B;;;OAGG;IACH,qBACuE;IAEvE;;;OAGG;IACH,eAAkB;IAElB;;;OAGG;IACH,kBAFU,OAAO,YAAY,EAAE,MAAM,CAEmC;IAG1E;;OAEG;IACH,0BAEC;IAED;;OAEG;IACH,aAFY,OAAO,aAAa,EAAE,MAAM,CAIvC;IAED;;OAEG;IACH,YAFY,OAAO,eAAe,EAAE,SAAS,CAI5C;IAED;;OAEG;IACH,iBAFY,MAAM,CAIjB;IAED;;OAEG;IACH,iBAFY,MAAM,GAAC,MAAM,MAAM,CAAC,CAI/B;IAED;;OAEG;IACH,gBAEC;IAED;;OAEG;IACH,aA0CC;IAED;;OAEG;IACH,gBAFW,OAAO,eAAe,EAAE,SAAS,QAI3C;IAED;;OAEG;IACH,0BAFW,MAAM,GAAC,MAAM,MAAM,CAAC,QAI9B;CACF;wBA7MuB,oBAAoB"}

package/Image.js

@@ -1,12 +1,12 @@
 /**
  * @module ol/Image
  */
+import EventTarget from './events/Target.js';
 import EventType from './events/EventType.js';
-import ImageBase from './ImageBase.js';
 import ImageState from './ImageState.js';
-import {IMAGE_DECODE} from './has.js';
-import {getHeight} from './extent.js';
+import {CREATE_IMAGE_BITMAP, IMAGE_DECODE} from './has.js';
 import {listenOnce, unlistenByKey} from './events.js';
+import {toPromise} from './functions.js';
 
 /**
  * A function that takes an {@link module:ol/Image~ImageWrapper} for the image and a
@@ -22,159 +22,194 @@ import {listenOnce, unlistenByKey} from './events.js';
  * post requests or - in general - through XHR requests, where the src of the
  * image element would be set to a data URI when the content is loaded.
  *
- * @typedef {function(ImageWrapper, string): void} LoadFunction
+ * @typedef {function(import("./Image.js").default, string): void} LoadFunction
  * @api
  */
 
-class ImageWrapper extends ImageBase {
+/**
+ * @typedef {Object} ImageObject
+ * @property {import("./extent.js").Extent} [extent] Extent, if different from the requested one.
+ * @property {import("./resolution.js").ResolutionLike} [resolution] Resolution, if different from the requested one.
+ * When x and y resolution are different, use the array type (`[xResolution, yResolution]`).
+ * @property {number} [pixelRatio] Pixel ratio, if different from the requested one.
+ * @property {import('./DataTile.js').ImageLike} image Image.
+ */
+
+/**
+ * Loader function used for image sources. Receives extent, resolution and pixel ratio as arguments.
+ * The function returns an {@link import("./DataTile.js").ImageLike image}, an
+ * {@link import("./Image.js").ImageObject image object}, or a promise for the same.
+ * For loaders that generate images, the promise should not resolve until the image is loaded.
+ * If the returned image does not match the extent, resolution or pixel ratio passed to the loader,
+ * it has to return an {@link import("./Image.js").ImageObject image object} with the `image` and the
+ * correct `extent`, `resolution` and `pixelRatio`.
+ *
+ * @typedef {function(import("./extent.js").Extent, number, number, (function(HTMLImageElement, string): void)=): import("./DataTile.js").ImageLike|ImageObject|Promise<import("./DataTile.js").ImageLike|ImageObject>} Loader
+ * @api
+ */
+
+/**
+ * Loader function used for image sources. Receives extent, resolution and pixel ratio as arguments.
+ * The function returns a promise for an  {@link import("./Image.js").ImageObject image object}.
+ *
+ * @typedef {function(import("./extent.js").Extent, number, number, (function(HTMLImageElement, string): void)=): import("./DataTile.js").ImageLike|ImageObject|Promise<import("./DataTile.js").ImageLike|ImageObject>} ImageObjectPromiseLoader
+ */
+
+class ImageWrapper extends EventTarget {
   /**
    * @param {import("./extent.js").Extent} extent Extent.
-   * @param {number|undefined} resolution Resolution.
+   * @param {number|Array<number>|undefined} resolution Resolution. If provided as array, x and y
+   * resolution will be assumed.
    * @param {number} pixelRatio Pixel ratio.
-   * @param {string} src Image source URI.
-   * @param {?string} crossOrigin Cross origin.
-   * @param {LoadFunction} imageLoadFunction Image load function.
-   * @param {CanvasRenderingContext2D} [context] Canvas context. When provided, the image will be
-   *    drawn into the context's canvas, and `getImage()` will return the canvas once the image
-   *    has finished loading.
+   * @param {import("./ImageState.js").default|import("./Image.js").Loader} stateOrLoader State.
    */
-  constructor(
-    extent,
-    resolution,
-    pixelRatio,
-    src,
-    crossOrigin,
-    imageLoadFunction,
-    context
-  ) {
-    super(extent, resolution, pixelRatio, ImageState.IDLE);
-
-    /**
-     * @private
-     * @type {string}
-     */
-    this.src_ = src;
+  constructor(extent, resolution, pixelRatio, stateOrLoader) {
+    super();
 
     /**
-     * @private
-     * @type {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement}
+     * @protected
+     * @type {import("./extent.js").Extent}
      */
-    this.image_ = new Image();
-    if (crossOrigin !== null) {
-      this.image_.crossOrigin = crossOrigin;
-    }
+    this.extent = extent;
 
     /**
      * @private
-     * @type {CanvasRenderingContext2D}
+     * @type {number}
      */
-    this.context_ = context;
+    this.pixelRatio_ = pixelRatio;
 
     /**
-     * @private
-     * @type {?function():void}
+     * @protected
+     * @type {number|Array<number>|undefined}
      */
-    this.unlisten_ = null;
+    this.resolution = resolution;
 
     /**
      * @protected
      * @type {import("./ImageState.js").default}
      */
-    this.state = ImageState.IDLE;
+    this.state =
+      typeof stateOrLoader === 'function' ? ImageState.IDLE : stateOrLoader;
 
     /**
      * @private
-     * @type {LoadFunction}
+     * @type {import('./DataTile.js').ImageLike|null}
      */
-    this.imageLoadFunction_ = imageLoadFunction;
+    this.image_ = null;
+
+    /**
+     * @protected
+     * @type {import("./Image.js").Loader}
+     */
+    this.loader = typeof stateOrLoader === 'function' ? stateOrLoader : null;
   }
 
   /**
-   * @return {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} Image.
-   * @api
+   * @protected
+   */
+  changed() {
+    this.dispatchEvent(EventType.CHANGE);
+  }
+
+  /**
+   * @return {import("./extent.js").Extent} Extent.
+   */
+  getExtent() {
+    return this.extent;
+  }
+
+  /**
+   * @return {import('./DataTile.js').ImageLike} Image.
    */
   getImage() {
-    if (
-      this.state == ImageState.LOADED &&
-      this.context_ &&
-      !(this.image_ instanceof HTMLCanvasElement)
-    ) {
-      const canvas = this.context_.canvas;
-      canvas.width = this.image_.width;
-      canvas.height = this.image_.height;
-      this.context_.drawImage(this.image_, 0, 0);
-      this.image_ = this.context_.canvas;
-    }
     return this.image_;
   }
 
   /**
-   * Tracks loading or read errors.
-   *
-   * @private
+   * @return {number} PixelRatio.
    */
-  handleImageError_() {
-    this.state = ImageState.ERROR;
-    this.unlistenImage_();
-    this.changed();
+  getPixelRatio() {
+    return this.pixelRatio_;
   }
 
   /**
-   * Tracks successful image load.
-   *
-   * @private
+   * @return {number|Array<number>} Resolution.
    */
-  handleImageLoad_() {
-    if (this.resolution === undefined) {
-      this.resolution = getHeight(this.extent) / this.image_.height;
-    }
-    this.state = ImageState.LOADED;
-    this.unlistenImage_();
-    this.changed();
+  getResolution() {
+    return /** @type {number} */ (this.resolution);
+  }
+
+  /**
+   * @return {import("./ImageState.js").default} State.
+   */
+  getState() {
+    return this.state;
   }
 
   /**
-   * Load the image or retry if loading previously failed.
-   * Loading is taken care of by the tile queue, and calling this method is
-   * only needed for preloading or for reloading in case of an error.
-   * @api
+   * Load not yet loaded URI.
    */
   load() {
-    if (this.state == ImageState.IDLE || this.state == ImageState.ERROR) {
-      this.state = ImageState.LOADING;
-      this.changed();
-      this.imageLoadFunction_(this, this.src_);
-      this.unlisten_ = listenImage(
-        this.image_,
-        this.handleImageLoad_.bind(this),
-        this.handleImageError_.bind(this)
-      );
+    if (this.state == ImageState.IDLE) {
+      if (this.loader) {
+        this.state = ImageState.LOADING;
+        this.changed();
+        const resolution = this.getResolution();
+        const requestResolution = Array.isArray(resolution)
+          ? resolution[0]
+          : resolution;
+        toPromise(() =>
+          this.loader(this.getExtent(), requestResolution, this.getPixelRatio())
+        )
+          .then((image) => {
+            if ('image' in image) {
+              this.image_ = image.image;
+            }
+            if ('extent' in image) {
+              this.extent = image.extent;
+            }
+            if ('resolution' in image) {
+              this.resolution = image.resolution;
+            }
+            if ('pixelRatio' in image) {
+              this.pixelRatio_ = image.pixelRatio;
+            }
+            if (
+              image instanceof HTMLImageElement ||
+              image instanceof ImageBitmap ||
+              image instanceof HTMLCanvasElement ||
+              image instanceof HTMLVideoElement
+            ) {
+              this.image_ = image;
+            }
+            this.state = ImageState.LOADED;
+          })
+          .catch((error) => {
+            this.state = ImageState.ERROR;
+            console.error(error); // eslint-disable-line no-console
+          })
+          .finally(() => this.changed());
+      }
     }
   }
 
   /**
-   * @param {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} image Image.
+   * @param {import('./DataTile.js').ImageLike} image The image.
    */
   setImage(image) {
     this.image_ = image;
-    this.resolution = getHeight(this.extent) / this.image_.height;
   }
 
   /**
-   * Discards event handlers which listen for load completion or errors.
-   *
-   * @private
+   * @param {number|Array<number>} resolution Resolution.
    */
-  unlistenImage_() {
-    if (this.unlisten_) {
-      this.unlisten_();
-      this.unlisten_ = null;
-    }
+  setResolution(resolution) {
+    this.resolution = resolution;
   }
 }
 
 /**
- * @param {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} image Image element.
+ * @param {import('./DataTile.js').ImageLike} image Image element.
  * @param {function():any} loadHandler Load callback function.
  * @param {function():any} errorHandler Error callback function.
  * @return {function():void} Callback to stop listening.
@@ -222,4 +257,67 @@ export function listenImage(image, loadHandler, errorHandler) {
   };
 }
 
+/**
+ * Loads an image.
+ * @param {HTMLImageElement} image Image, not yet loaded.
+ * @param {string} [src] `src` attribute of the image. Optional, not required if already present.
+ * @return {Promise<HTMLImageElement>} Promise resolving to an `HTMLImageElement`.
+ * @api
+ */
+export function load(image, src) {
+  return new Promise((resolve, reject) => {
+    function handleLoad() {
+      unlisten();
+      resolve(image);
+    }
+    function handleError() {
+      unlisten();
+      reject(new Error('Image load error'));
+    }
+    function unlisten() {
+      image.removeEventListener('load', handleLoad);
+      image.removeEventListener('error', handleError);
+    }
+    image.addEventListener('load', handleLoad);
+    image.addEventListener('error', handleError);
+    if (src) {
+      image.src = src;
+    }
+  });
+}
+
+/**
+ * @param {HTMLImageElement} image Image, not yet loaded.
+ * @param {string} [src] `src` attribute of the image. Optional, not required if already present.
+ * @return {Promise<HTMLImageElement>} Promise resolving to an `HTMLImageElement`.
+ */
+export function decodeFallback(image, src) {
+  if (src) {
+    image.src = src;
+  }
+  return IMAGE_DECODE
+    ? new Promise((resolve, reject) =>
+        image.decode().then(() => resolve(image), reject)
+      )
+    : load(image);
+}
+
+/**
+ * Loads an image and decodes it to an `ImageBitmap` if `createImageBitmap()` is supported. Returns
+ * the laoded image otherwise.
+ * @param {HTMLImageElement} image Image, not yet loaded.
+ * @param {string} [src] `src` attribute of the image. Optional, not required if already present.
+ * @return {Promise<ImageBitmap|HTMLImageElement>} Promise resolving to an `ImageBitmap` or an
+ * `HTMLImageElement` if `createImageBitmap()` is not supported.
+ * @api
+ */
+export function decode(image, src) {
+  if (src) {
+    image.src = src;
+  }
+  return IMAGE_DECODE && CREATE_IMAGE_BITMAP
+    ? image.decode().then(() => createImageBitmap(image))
+    : decodeFallback(image);
+}
+
 export default ImageWrapper;

package/ImageCanvas.d.ts

@@ -14,7 +14,7 @@ export type Loader = (arg0: (arg0: Error | undefined) => void) => void;
  *
  * @typedef {function(function(Error=): void): void} Loader
  */
-declare class ImageCanvas extends ImageBase {
+declare class ImageCanvas extends ImageWrapper {
     /**
      * @param {import("./extent.js").Extent} extent Extent.
      * @param {number} resolution Resolution.
@@ -56,5 +56,5 @@ declare class ImageCanvas extends ImageBase {
      */
     getImage(): HTMLCanvasElement;
 }
-import ImageBase from './ImageBase.js';
+import ImageWrapper from './Image.js';
 //# sourceMappingURL=ImageCanvas.d.ts.map