@loaders.gl/images 3.1.0-alpha.2 → 3.1.0-beta.1

package/dist/lib/parsers/parse-to-node-image.js

@@ -1,14 +1,14 @@
-import { global } from '../utils/globals';
-import { assert } from '../utils/assert';
-import { getBinaryImageMetadata } from '../category-api/binary-image-api';
-export default function parseToNodeImage(arrayBuffer, options) {
-  const {
-    mimeType
-  } = getBinaryImageMetadata(arrayBuffer) || {};
-  const {
-    _parseImageNode
-  } = global;
-  assert(_parseImageNode);
-  return _parseImageNode(arrayBuffer, mimeType, options);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const loader_utils_1 = require("@loaders.gl/loader-utils");
+const binary_image_api_1 = require("../category-api/binary-image-api");
+// Use polyfills if installed to parsed image using get-pixels
+async function parseToNodeImage(arrayBuffer, options) {
+    const { mimeType } = (0, binary_image_api_1.getBinaryImageMetadata)(arrayBuffer) || {};
+    // @ts-ignore
+    const _parseImageNode = globalThis._parseImageNode;
+    (0, loader_utils_1.assert)(_parseImageNode); // '@loaders.gl/polyfills not installed'
+    // @ts-expect-error TODO should we throw error in this case?
+    return await _parseImageNode(arrayBuffer, mimeType);
 }
-//# sourceMappingURL=parse-to-node-image.js.map
+exports.default = parseToNodeImage;

package/dist/lib/parsers/svg-utils.d.ts

@@ -0,0 +1,4 @@
+export declare function isSVG(url: any): any;
+export declare function getBlobOrSVGDataUrl(arrayBuffer: ArrayBuffer, url?: string): Blob | string;
+export declare function getBlob(arrayBuffer: ArrayBuffer, url?: string): Blob;
+//# sourceMappingURL=svg-utils.d.ts.map

package/dist/lib/parsers/svg-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg-utils.d.ts","sourceRoot":"","sources":["../../../src/lib/parsers/svg-utils.ts"],"names":[],"mappings":"AAMA,wBAAgB,KAAK,CAAC,GAAG,KAAA,OAExB;AAED,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,WAAW,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAkBzF;AAED,wBAAgB,OAAO,CAAC,WAAW,EAAE,WAAW,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAQpE"}

package/dist/lib/parsers/svg-utils.js

@@ -1,32 +1,42 @@
+"use strict";
+// SVG parsing has limitations, e.g:
+// https://bugs.chromium.org/p/chromium/issues/detail?id=606319
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBlob = exports.getBlobOrSVGDataUrl = exports.isSVG = void 0;
 const SVG_DATA_URL_PATTERN = /^data:image\/svg\+xml/;
 const SVG_URL_PATTERN = /\.svg((\?|#).*)?$/;
-export function isSVG(url) {
-  return url && (SVG_DATA_URL_PATTERN.test(url) || SVG_URL_PATTERN.test(url));
+function isSVG(url) {
+    return url && (SVG_DATA_URL_PATTERN.test(url) || SVG_URL_PATTERN.test(url));
 }
-export function getBlobOrSVGDataUrl(arrayBuffer, url) {
-  if (isSVG(url)) {
-    const textDecoder = new TextDecoder();
-    let xmlText = textDecoder.decode(arrayBuffer);
-
-    try {
-      if (typeof unescape === 'function' && typeof encodeURIComponent === 'function') {
-        xmlText = unescape(encodeURIComponent(xmlText));
-      }
-    } catch (error) {
-      throw new Error(error.message);
+exports.isSVG = isSVG;
+function getBlobOrSVGDataUrl(arrayBuffer, url) {
+    if (isSVG(url)) {
+        // Prepare a properly tagged data URL, and load using normal mechanism
+        const textDecoder = new TextDecoder();
+        let xmlText = textDecoder.decode(arrayBuffer);
+        // TODO Escape in browser to support e.g. Chinese characters
+        try {
+            if (typeof unescape === 'function' && typeof encodeURIComponent === 'function') {
+                xmlText = unescape(encodeURIComponent(xmlText));
+            }
+        }
+        catch (error) {
+            throw new Error(error.message);
+        }
+        // base64 encoding is safer. utf-8 fails in some browsers
+        const src = `data:image/svg+xml;base64,${btoa(xmlText)}`;
+        return src;
     }
-
-    const src = `data:image/svg+xml;base64,${btoa(xmlText)}`;
-    return src;
-  }
-
-  return getBlob(arrayBuffer, url);
+    return getBlob(arrayBuffer, url);
 }
-export function getBlob(arrayBuffer, url) {
-  if (isSVG(url)) {
-    throw new Error('SVG cannot be parsed directly to imagebitmap');
-  }
-
-  return new Blob([new Uint8Array(arrayBuffer)]);
+exports.getBlobOrSVGDataUrl = getBlobOrSVGDataUrl;
+function getBlob(arrayBuffer, url) {
+    if (isSVG(url)) {
+        // https://bugs.chromium.org/p/chromium/issues/detail?id=606319
+        // return new Blob([new Uint8Array(arrayBuffer)], {type: 'image/svg+xml'});
+        throw new Error('SVG cannot be parsed directly to imagebitmap');
+    }
+    // TODO - how to determine mime type? Param? Sniff here?
+    return new Blob([new Uint8Array(arrayBuffer)]); // MIME type not needed?
 }
-//# sourceMappingURL=svg-utils.js.map
+exports.getBlob = getBlob;

package/dist/lib/texture-api/async-deep-map.d.ts

@@ -0,0 +1,3 @@
+export declare function asyncDeepMap(tree: any, func: any, options?: {}): Promise<any>;
+export declare function mapSubtree(object: any, func: any, options: any): Promise<any>;
+//# sourceMappingURL=async-deep-map.d.ts.map

package/dist/lib/texture-api/async-deep-map.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"async-deep-map.d.ts","sourceRoot":"","sources":["../../../src/lib/texture-api/async-deep-map.ts"],"names":[],"mappings":"AAqBA,wBAAsB,YAAY,CAAC,IAAI,KAAA,EAAE,IAAI,KAAA,EAAE,OAAO,KAAK,gBAE1D;AAED,wBAAsB,UAAU,CAAC,MAAM,KAAA,EAAE,IAAI,KAAA,EAAE,OAAO,KAAA,gBAYrD"}

package/dist/lib/texture-api/async-deep-map.js

@@ -1,39 +1,56 @@
-const isObject = value => value && typeof value === 'object';
+"use strict";
+/*
+Asynchronously maps a deep structure of values (e.g. objects and arrays of urls).
 
-export async function asyncDeepMap(tree, func, options = {}) {
-  return await mapSubtree(tree, func, options);
+E.g. a mipmapped cubemap
+{
+  [CUBE_FACE_FRONT]: [
+    "image-front-0.jpg",
+    "image-front-1.jpg",
+    "image-front-2.jpg",
+  ],
+  [CUBE_MAP_BACK]: [
+    ...
+  ]
 }
-export async function mapSubtree(object, func, options) {
-  if (Array.isArray(object)) {
-    return await mapArray(object, func, options);
-  }
-
-  if (isObject(object)) {
-    return await mapObject(object, func, options);
-  }
-
-  const url = object;
-  return await func(url, options);
+*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapSubtree = exports.asyncDeepMap = void 0;
+const isObject = (value) => value && typeof value === 'object';
+// Loads a deep structure of urls (objects and arrays of urls)
+// Returns an object with six key-value pairs containing the images (or image mip arrays)
+// for each cube face
+async function asyncDeepMap(tree, func, options = {}) {
+    return await mapSubtree(tree, func, options);
 }
-
+exports.asyncDeepMap = asyncDeepMap;
+async function mapSubtree(object, func, options) {
+    if (Array.isArray(object)) {
+        return await mapArray(object, func, options);
+    }
+    if (isObject(object)) {
+        return await mapObject(object, func, options);
+    }
+    // TODO - ignore non-urls, non-arraybuffers?
+    const url = object;
+    return await func(url, options);
+}
+exports.mapSubtree = mapSubtree;
+// HELPERS
 async function mapObject(object, func, options) {
-  const promises = [];
-  const values = {};
-
-  for (const key in object) {
-    const url = object[key];
-    const promise = mapSubtree(url, func, options).then(value => {
-      values[key] = value;
-    });
-    promises.push(promise);
-  }
-
-  await Promise.all(promises);
-  return values;
+    const promises = [];
+    const values = {};
+    for (const key in object) {
+        const url = object[key];
+        const promise = mapSubtree(url, func, options).then((value) => {
+            values[key] = value;
+        });
+        promises.push(promise);
+    }
+    await Promise.all(promises);
+    return values;
 }
-
 async function mapArray(urlArray, func, options = {}) {
-  const promises = urlArray.map(url => mapSubtree(url, func, options));
-  return await Promise.all(promises);
+    const promises = urlArray.map((url) => mapSubtree(url, func, options));
+    return await Promise.all(promises);
 }
-//# sourceMappingURL=async-deep-map.js.map

package/dist/lib/texture-api/deep-load.d.ts

@@ -0,0 +1,3 @@
+export declare function deepLoad(urlTree: any, load: any, options: any): Promise<any>;
+export declare function shallowLoad(url: any, load: any, options: any): Promise<any>;
+//# sourceMappingURL=deep-load.d.ts.map

package/dist/lib/texture-api/deep-load.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deep-load.d.ts","sourceRoot":"","sources":["../../../src/lib/texture-api/deep-load.ts"],"names":[],"mappings":"AAEA,wBAAsB,QAAQ,CAAC,OAAO,KAAA,EAAE,IAAI,KAAA,EAAE,OAAO,KAAA,gBAEpD;AAED,wBAAsB,WAAW,CAAC,GAAG,KAAA,EAAE,IAAI,KAAA,EAAE,OAAO,KAAA,gBAKnD"}

package/dist/lib/texture-api/deep-load.js

@@ -1,10 +1,15 @@
-import { asyncDeepMap } from './async-deep-map';
-export async function deepLoad(urlTree, load, options) {
-  return await asyncDeepMap(urlTree, url => shallowLoad(url, load, options));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shallowLoad = exports.deepLoad = void 0;
+const async_deep_map_1 = require("./async-deep-map");
+async function deepLoad(urlTree, load, options) {
+    return await (0, async_deep_map_1.asyncDeepMap)(urlTree, (url) => shallowLoad(url, load, options));
 }
-export async function shallowLoad(url, load, options) {
-  const response = await fetch(url, options.fetch);
-  const arrayBuffer = await response.arrayBuffer();
-  return await load(arrayBuffer, options);
+exports.deepLoad = deepLoad;
+async function shallowLoad(url, load, options) {
+    // console.error('loading', url);
+    const response = await fetch(url, options.fetch);
+    const arrayBuffer = await response.arrayBuffer();
+    return await load(arrayBuffer, options);
 }
-//# sourceMappingURL=deep-load.js.map
+exports.shallowLoad = shallowLoad;

package/dist/lib/texture-api/generate-url.d.ts

@@ -0,0 +1,2 @@
+export declare function generateUrl(getUrl: any, options: any, urlOptions: any): string;
+//# sourceMappingURL=generate-url.d.ts.map

package/dist/lib/texture-api/generate-url.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-url.d.ts","sourceRoot":"","sources":["../../../src/lib/texture-api/generate-url.ts"],"names":[],"mappings":"AAGA,wBAAgB,WAAW,CAAC,MAAM,KAAA,EAAE,OAAO,KAAA,EAAE,UAAU,KAAA,UAetD"}

package/dist/lib/texture-api/generate-url.js

@@ -1,23 +1,20 @@
-import { resolvePath } from '@loaders.gl/loader-utils';
-import { assert } from '../utils/assert';
-export function generateUrl(getUrl, options, urlOptions) {
-  let url = getUrl;
-
-  if (typeof getUrl === 'function') {
-    url = getUrl({ ...options,
-      ...urlOptions
-    });
-  }
-
-  assert(typeof url === 'string');
-  const {
-    baseUrl
-  } = options;
-
-  if (baseUrl) {
-    url = baseUrl[baseUrl.length - 1] === '/' ? `${baseUrl}${url}` : `${baseUrl}/${url}`;
-  }
-
-  return resolvePath(url);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateUrl = void 0;
+const loader_utils_1 = require("@loaders.gl/loader-utils");
+// Generate a url by calling getUrl with mix of options, applying options.baseUrl
+function generateUrl(getUrl, options, urlOptions) {
+    // Get url
+    let url = getUrl;
+    if (typeof getUrl === 'function') {
+        url = getUrl({ ...options, ...urlOptions });
+    }
+    (0, loader_utils_1.assert)(typeof url === 'string');
+    // Apply options.baseUrl
+    const { baseUrl } = options;
+    if (baseUrl) {
+        url = baseUrl[baseUrl.length - 1] === '/' ? `${baseUrl}${url}` : `${baseUrl}/${url}`;
+    }
+    return (0, loader_utils_1.resolvePath)(url);
 }
-//# sourceMappingURL=generate-url.js.map
+exports.generateUrl = generateUrl;

package/dist/lib/texture-api/load-image.d.ts

@@ -0,0 +1,7 @@
+export declare function loadImage(getUrl: any, options?: {}): Promise<any>;
+export declare function getImageUrls(getUrl: any, options: any, urlOptions?: {}): Promise<string | string[]>;
+export declare function getMipLevels({ width, height }: {
+    width: any;
+    height: any;
+}): number;
+//# sourceMappingURL=load-image.d.ts.map

package/dist/lib/texture-api/load-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"load-image.d.ts","sourceRoot":"","sources":["../../../src/lib/texture-api/load-image.ts"],"names":[],"mappings":"AAMA,wBAAsB,SAAS,CAAC,MAAM,KAAA,EAAE,OAAO,KAAK,gBAGnD;AAED,wBAAsB,YAAY,CAAC,MAAM,KAAA,EAAE,OAAO,KAAA,EAAE,UAAU,KAAK,8BAKlE;AA6BD,wBAAgB,YAAY,CAAC,EAAC,KAAK,EAAE,MAAM,EAAC;;;CAAA,UAE3C"}

package/dist/lib/texture-api/load-image.js

@@ -1,52 +1,47 @@
-import { assert } from '../utils/assert';
-import parseImage from '../parsers/parse-image';
-import { getImageSize } from '../category-api/parsed-image-api';
-import { generateUrl } from './generate-url';
-import { deepLoad, shallowLoad } from './deep-load';
-export async function loadImage(getUrl, options = {}) {
-  const imageUrls = await getImageUrls(getUrl, options);
-  return await deepLoad(imageUrls, parseImage, options);
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMipLevels = exports.getImageUrls = exports.loadImage = void 0;
+const loader_utils_1 = require("@loaders.gl/loader-utils");
+const parse_image_1 = __importDefault(require("../parsers/parse-image"));
+const parsed_image_api_1 = require("../category-api/parsed-image-api");
+const generate_url_1 = require("./generate-url");
+const deep_load_1 = require("./deep-load");
+async function loadImage(getUrl, options = {}) {
+    const imageUrls = await getImageUrls(getUrl, options);
+    return await (0, deep_load_1.deepLoad)(imageUrls, parse_image_1.default, options);
 }
-export async function getImageUrls(getUrl, options, urlOptions = {}) {
-  const mipLevels = options && options.image && options.image.mipLevels || 0;
-  return mipLevels !== 0 ? await getMipmappedImageUrls(getUrl, mipLevels, options, urlOptions) : generateUrl(getUrl, options, urlOptions);
+exports.loadImage = loadImage;
+async function getImageUrls(getUrl, options, urlOptions = {}) {
+    const mipLevels = (options && options.image && options.image.mipLevels) || 0;
+    return mipLevels !== 0
+        ? await getMipmappedImageUrls(getUrl, mipLevels, options, urlOptions)
+        : (0, generate_url_1.generateUrl)(getUrl, options, urlOptions);
 }
-
+exports.getImageUrls = getImageUrls;
 async function getMipmappedImageUrls(getUrl, mipLevels, options, urlOptions) {
-  const urls = [];
-
-  if (mipLevels === 'auto') {
-    const url = generateUrl(getUrl, options, { ...urlOptions,
-      lod: 0
-    });
-    const image = await shallowLoad(url, parseImage, options);
-    const {
-      width,
-      height
-    } = getImageSize(image);
-    mipLevels = getMipLevels({
-      width,
-      height
-    });
-    urls.push(url);
-  }
-
-  assert(mipLevels > 0);
-
-  for (let mipLevel = urls.length; mipLevel < mipLevels; ++mipLevel) {
-    const url = generateUrl(getUrl, options, { ...urlOptions,
-      lod: mipLevel
-    });
-    urls.push(url);
-  }
-
-  return urls;
+    const urls = [];
+    // If no mip levels supplied, we need to load the level 0 image and calculate based on size
+    if (mipLevels === 'auto') {
+        const url = (0, generate_url_1.generateUrl)(getUrl, options, { ...urlOptions, lod: 0 });
+        const image = await (0, deep_load_1.shallowLoad)(url, parse_image_1.default, options);
+        const { width, height } = (0, parsed_image_api_1.getImageSize)(image);
+        mipLevels = getMipLevels({ width, height });
+        // TODO - push image and make `deepLoad` pass through non-url values, avoid loading twice?
+        urls.push(url);
+    }
+    // We now know how many mipLevels we need, remaining image urls can now be constructed
+    (0, loader_utils_1.assert)(mipLevels > 0);
+    for (let mipLevel = urls.length; mipLevel < mipLevels; ++mipLevel) {
+        const url = (0, generate_url_1.generateUrl)(getUrl, options, { ...urlOptions, lod: mipLevel });
+        urls.push(url);
+    }
+    return urls;
 }
-
-export function getMipLevels({
-  width,
-  height
-}) {
-  return 1 + Math.floor(Math.log2(Math.max(width, height)));
+// Calculates number of mipmaps based on texture size (log2)
+function getMipLevels({ width, height }) {
+    return 1 + Math.floor(Math.log2(Math.max(width, height)));
 }
-//# sourceMappingURL=load-image.js.map
+exports.getMipLevels = getMipLevels;

package/dist/lib/utils/version.d.ts

@@ -0,0 +1,2 @@
+export declare const VERSION: any;
+//# sourceMappingURL=version.d.ts.map

package/dist/lib/utils/version.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/version.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,KAA8D,CAAC"}

package/dist/lib/utils/version.js

@@ -1,2 +1,7 @@
-export const VERSION = typeof "3.1.0-alpha.2" !== 'undefined' ? "3.1.0-alpha.2" : 'latest';
-//# sourceMappingURL=version.js.map
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VERSION = void 0;
+// Version constant cannot be imported, it needs to correspond to the build version of **this** module.
+// __VERSION__ is injected by babel-plugin-version-inline
+// @ts-ignore TS2304: Cannot find name '__VERSION__'.
+exports.VERSION = typeof __VERSION__ !== 'undefined' ? __VERSION__ : 'latest';

package/dist/types.d.ts

@@ -0,0 +1,18 @@
+/**
+ * data images
+ */
+export declare type ImageDataType = {
+    data: Uint8Array;
+    width: number;
+    height: number;
+    compressed?: boolean;
+};
+/**
+ * Supported Image Types
+ */
+export declare type ImageType = ImageBitmap | typeof Image | ImageDataType;
+/**
+ * Image type string used to control or determine the type of images returned from ImageLoader
+ */
+export declare type ImageTypeEnum = 'imagebitmap' | 'image' | 'data';
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,oBAAY,aAAa,GAAG;IAC1B,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,oBAAY,SAAS,GAAG,WAAW,GAAG,OAAO,KAAK,GAAG,aAAa,CAAC;AAEnE;;GAEG;AACH,oBAAY,aAAa,GAAG,aAAa,GAAG,OAAO,GAAG,MAAM,CAAC"}

package/dist/types.js

@@ -1,2 +1,2 @@
-export {};
-//# sourceMappingURL=types.js.map
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loaders.gl/images",
-  "version": "3.1.0-alpha.2",
+  "version": "3.1.0-beta.1",
   "description": "Framework-independent loaders and writers for images (PNG, JPG, ...)",
   "license": "MIT",
   "publishConfig": {
@@ -18,9 +18,9 @@
     "point cloud",
     "PLY"
   ],
-  "types": "src/index.ts",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "main": "dist/es5/index.js",
+  "module": "dist/esm/index.js",
   "sideEffects": false,
   "files": [
     "src",
@@ -29,11 +29,10 @@
   ],
   "scripts": {
     "pre-build": "npm run build-bundle",
-    "build-bundle": "webpack  --display=minimal --config ../../scripts/webpack/bundle.js",
-    "build-worker": "webpack --entry ./src/image-worker.js --output ./dist/image-worker.js --config ../../scripts/webpack/worker.js"
+    "build-bundle": "esbuild src/bundle.ts --outfile=dist/dist.min.js --bundle --minify --sourcemap"
   },
   "dependencies": {
-    "@loaders.gl/loader-utils": "3.1.0-alpha.2"
+    "@loaders.gl/loader-utils": "3.1.0-beta.1"
   },
-  "gitHead": "ca83b8f05a6874db93051d446266d9ea360affb2"
+  "gitHead": "980cdefb4e8ec9ef9c951d20c78cf77777707f49"
 }

package/src/bundle.ts

@@ -1,5 +1,4 @@
 // @ts-nocheck
 const moduleExports = require('./index');
-const _global = typeof window === 'undefined' ? global : window;
-_global.loaders = _global.loaders || {};
-module.exports = Object.assign(_global.loaders, moduleExports);
+globalThis.loaders = globalThis.loaders || {};
+module.exports = Object.assign(globalThis.loaders, moduleExports);

package/src/image-loader.ts

@@ -1,4 +1,4 @@
-import type {LoaderWithParser} from '@loaders.gl/loader-utils';
+import type {LoaderOptions, LoaderWithParser} from '@loaders.gl/loader-utils';
 import {VERSION} from './lib/utils/version';
 import parseImage from './lib/parsers/parse-image';
 import {getBinaryImageMetadata} from './lib/category-api/binary-image-api';
@@ -14,6 +14,22 @@ const MIME_TYPES = [
   'image/svg+xml'
 ];
 
+export type ImageLoaderOptions = LoaderOptions & {
+  image?: {
+    type?: 'auto' | 'data' | 'imagebitmap' | 'image';
+    decode?: boolean;
+  };
+  imagebitmap?: ImageBitmapOptions;
+};
+
+const DEFAULT_IMAGE_LOADER_OPTIONS: ImageLoaderOptions = {
+  image: {
+    type: 'auto',
+    decode: true // if format is HTML
+  }
+  // imagebitmap: {} - passes (platform dependent) parameters to ImageBitmap constructor
+};
+
 /**
  * Loads a platform-specific image type
  * Note: This type can be used as input data to WebGL texture creation
@@ -28,13 +44,7 @@ export const ImageLoader = {
   parse: parseImage,
   // TODO: byteOffset, byteLength;
   tests: [(arrayBuffer) => Boolean(getBinaryImageMetadata(new DataView(arrayBuffer)))],
-  options: {
-    image: {
-      type: 'auto',
-      decode: true // if format is HTML
-    }
-    // imagebitmap: {} - passes (platform dependent) parameters to ImageBitmap constructor
-  }
+  options: DEFAULT_IMAGE_LOADER_OPTIONS
 };
 
 export const _typecheckImageLoader: LoaderWithParser = ImageLoader;

package/src/index.ts

@@ -1,5 +1,6 @@
 // TYPES
 export type {ImageDataType, ImageType, ImageTypeEnum} from './types';
+export type {ImageLoaderOptions} from './image-loader';
 
 // LOADERS AND WRITERS
 export {ImageLoader} from './image-loader';
@@ -20,5 +21,8 @@ export {
   getImageData
 } from './lib/category-api/parsed-image-api';
 
+// EXPERIMENTAL
+export {_isImageFormatSupported} from './lib/category-api/image-format';
+
 // DEPRECATED - Remove in V3 (fix dependency in luma.gl)
 export {loadImage} from './lib/texture-api/load-image';

package/src/lib/category-api/image-format.ts

@@ -0,0 +1,66 @@
+import {isBrowser} from '@loaders.gl/loader-utils';
+
+// The following formats are supported by loaders.gl polyfills
+const NODE_FORMAT_SUPPORT = ['image/png', 'image/jpeg', 'image/gif'];
+
+/** Cache values for speed */
+const mimeTypeSupported: {[mimeType: string]: boolean} = {};
+
+/**
+ * Check if image MIME type is supported. Result is cached.
+ */
+export function _isImageFormatSupported(mimeType: string): boolean {
+  if (mimeTypeSupported[mimeType] === undefined) {
+    mimeTypeSupported[mimeType] = checkFormatSupport(mimeType);
+  }
+  return mimeTypeSupported[mimeType];
+}
+
+/**
+ * Check if image MIME type is supported.
+ */
+function checkFormatSupport(mimeType: string): boolean {
+  switch (mimeType) {
+    case 'image/webp':
+      return checkWebPSupport();
+    case 'image/svg':
+      return isBrowser;
+    default:
+      if (!isBrowser) {
+        // @ts-ignore
+        const {_parseImageNode} = globalThis;
+        return Boolean(_parseImageNode) && NODE_FORMAT_SUPPORT.includes(mimeType);
+      }
+      return true;
+  }
+}
+
+/** Check WebPSupport synchronously */
+function checkWebPSupport() {
+  if (!isBrowser) {
+    return false;
+  }
+  try {
+    const element = document.createElement('canvas');
+    return element.toDataURL('image/webp').indexOf('data:image/webp') === 0;
+  } catch {
+    // Probably Safari...
+    return false;
+  }
+}
+
+// Note: better test but asynchronous
+
+// Lossy test image. Support for lossy images doesn't guarantee support for all WebP images.
+// https://stackoverflow.com/questions/5573096/detecting-webp-support
+// const WEBP_TEST_IMAGE = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
+
+// Check WebPSupport asynchronously
+// async function isWebPSupported() {
+//   return new Promise( resolve => {
+//     const image = new Image();
+//     image.src = WEBP_TEST_IMAGE;
+//     image.onload = image.onerror = function () {
+//     resolve( image.height === 1 );
+//   }
+// }

package/src/lib/category-api/image-type.ts

@@ -1,8 +1,8 @@
+import {isBrowser} from '@loaders.gl/loader-utils';
 import type {ImageTypeEnum} from '../../types';
-import {global, isBrowser} from '../utils/globals';
 
 // @ts-ignore TS2339: Property does not exist on type
-const {_parseImageNode} = global;
+const {_parseImageNode} = globalThis;
 
 const IMAGE_SUPPORTED = typeof Image !== 'undefined'; // NOTE: "false" positives if jsdom is installed
 const IMAGE_BITMAP_SUPPORTED = typeof ImageBitmap !== 'undefined';