@loaders.gl/images 4.0.0-alpha.5 → 4.0.0-alpha.6

package/dist/lib/category-api/image-type.js

@@ -1,42 +1,48 @@
-import { isBrowser } from '@loaders.gl/loader-utils';
-const {
-  _parseImageNode
-} = globalThis;
-const IMAGE_SUPPORTED = typeof Image !== 'undefined';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultImageType = exports.isImageTypeSupported = void 0;
+const loader_utils_1 = require("@loaders.gl/loader-utils");
+// @ts-ignore TS2339: Property does not exist on type
+const { _parseImageNode } = globalThis;
+const IMAGE_SUPPORTED = typeof Image !== 'undefined'; // NOTE: "false" positives if jsdom is installed
 const IMAGE_BITMAP_SUPPORTED = typeof ImageBitmap !== 'undefined';
 const NODE_IMAGE_SUPPORTED = Boolean(_parseImageNode);
-const DATA_SUPPORTED = isBrowser ? true : NODE_IMAGE_SUPPORTED;
-export function isImageTypeSupported(type) {
-  switch (type) {
-    case 'auto':
-      return IMAGE_BITMAP_SUPPORTED || IMAGE_SUPPORTED || DATA_SUPPORTED;
-
-    case 'imagebitmap':
-      return IMAGE_BITMAP_SUPPORTED;
-
-    case 'image':
-      return IMAGE_SUPPORTED;
-
-    case 'data':
-      return DATA_SUPPORTED;
-
-    default:
-      throw new Error("@loaders.gl/images: image ".concat(type, " not supported in this environment"));
-  }
+const DATA_SUPPORTED = loader_utils_1.isBrowser ? true : NODE_IMAGE_SUPPORTED;
+/**
+ * Checks if a loaders.gl image type is supported
+ * @param type image type string
+ */
+function isImageTypeSupported(type) {
+    switch (type) {
+        case 'auto':
+            // Should only ever be false in Node.js, if polyfills have not been installed...
+            return IMAGE_BITMAP_SUPPORTED || IMAGE_SUPPORTED || DATA_SUPPORTED;
+        case 'imagebitmap':
+            return IMAGE_BITMAP_SUPPORTED;
+        case 'image':
+            return IMAGE_SUPPORTED;
+        case 'data':
+            return DATA_SUPPORTED;
+        default:
+            throw new Error(`@loaders.gl/images: image ${type} not supported in this environment`);
+    }
 }
-export function getDefaultImageType() {
-  if (IMAGE_BITMAP_SUPPORTED) {
-    return 'imagebitmap';
-  }
-
-  if (IMAGE_SUPPORTED) {
-    return 'image';
-  }
-
-  if (DATA_SUPPORTED) {
-    return 'data';
-  }
-
-  throw new Error('Install \'@loaders.gl/polyfills\' to parse images under Node.js');
+exports.isImageTypeSupported = isImageTypeSupported;
+/**
+ * Returns the "most performant" supported image type on this platform
+ * @returns image type string
+ */
+function getDefaultImageType() {
+    if (IMAGE_BITMAP_SUPPORTED) {
+        return 'imagebitmap';
+    }
+    if (IMAGE_SUPPORTED) {
+        return 'image';
+    }
+    if (DATA_SUPPORTED) {
+        return 'data';
+    }
+    // This should only happen in Node.js
+    throw new Error('Install \'@loaders.gl/polyfills\' to parse images under Node.js');
 }
-//# sourceMappingURL=image-type.js.map
+exports.getDefaultImageType = getDefaultImageType;

package/dist/lib/category-api/parse-isobmff-binary.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Box is a container format that can contain a variety of media related files,
+ * so we want to return information about which type of file is actually contained inside
+ */
+export type BoxFileType = {
+    extension: string;
+    mimeType: string;
+};
+/**
+ * Tests if a buffer is in ISO base media file format (ISOBMFF) @see https://en.wikipedia.org/wiki/ISO_base_media_file_format
+ * (ISOBMFF is a media container standard based on the Apple QuickTime container format)
+ */
+export declare function getISOBMFFMediaType(buffer: Uint8Array): BoxFileType | null;
+/**
+ * brands explained @see https://github.com/strukturag/libheif/issues/83
+ * code adapted from @see https://github.com/sindresorhus/file-type/blob/main/core.js#L489-L492
+ */
+export declare function decodeMajorBrand(buffer: Uint8Array): BoxFileType | null;
+//# sourceMappingURL=parse-isobmff-binary.d.ts.map

package/dist/lib/category-api/parse-isobmff-binary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse-isobmff-binary.d.ts","sourceRoot":"","sources":["../../../src/lib/category-api/parse-isobmff-binary.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAC,CAAC;AAEhE;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,UAAU,GAAG,WAAW,GAAG,IAAI,CAa1E;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,UAAU,GAAG,WAAW,GAAG,IAAI,CAmDvE"}

package/dist/lib/category-api/parse-isobmff-binary.js

@@ -0,0 +1,94 @@
+"use strict";
+// loaders.gl, MIT license
+// code adapted from https://github.com/sindresorhus/file-type under MIT license
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.decodeMajorBrand = exports.getISOBMFFMediaType = void 0;
+/**
+ * Tests if a buffer is in ISO base media file format (ISOBMFF) @see https://en.wikipedia.org/wiki/ISO_base_media_file_format
+ * (ISOBMFF is a media container standard based on the Apple QuickTime container format)
+ */
+function getISOBMFFMediaType(buffer) {
+    // Almost all ISO base media files start with `ftyp` box. (It's not required to be first, but it's recommended to be.)
+    if (!checkString(buffer, 'ftyp', 4)) {
+        return null;
+    }
+    // Extra check: test for 8859-1 printable characters (for simplicity, it's a mask which also catches one non-printable character).
+    if ((buffer[8] & 0x60) === 0x00) {
+        return null;
+    }
+    // `ftyp` box must contain a brand major identifier, which must consist of ISO 8859-1 printable characters.
+    return decodeMajorBrand(buffer);
+}
+exports.getISOBMFFMediaType = getISOBMFFMediaType;
+/**
+ * brands explained @see https://github.com/strukturag/libheif/issues/83
+ * code adapted from @see https://github.com/sindresorhus/file-type/blob/main/core.js#L489-L492
+ */
+function decodeMajorBrand(buffer) {
+    const brandMajor = getUTF8String(buffer, 8, 12).replace('\0', ' ').trim();
+    switch (brandMajor) {
+        case 'avif':
+        case 'avis':
+            return { extension: 'avif', mimeType: 'image/avif' };
+        default:
+            return null;
+    }
+    // We don't need these now, but they are easy to add
+    // case 'mif1':
+    //   return {extension: 'heic', mimeType: 'image/heif'};
+    // case 'msf1':
+    //   return {extension: 'heic', mimeType: 'image/heif-sequence'};
+    // case 'heic':
+    // case 'heix':
+    //   return {extension: 'heic', mimeType: 'image/heic'};
+    // case 'hevc':
+    // case 'hevx':
+    //   return {extension: 'heic', mimeType: 'image/heic-sequence'};
+    // case 'qt':
+    //   return {ext: 'mov', mime: 'video/quicktime'};
+    // case 'M4V':
+    // case 'M4VH':
+    // case 'M4VP':
+    //   return {ext: 'm4v', mime: 'video/x-m4v'};
+    // case 'M4P':
+    //   return {ext: 'm4p', mime: 'video/mp4'};
+    // case 'M4B':
+    //   return {ext: 'm4b', mime: 'audio/mp4'};
+    // case 'M4A':
+    //   return {ext: 'm4a', mime: 'audio/x-m4a'};
+    // case 'F4V':
+    //   return {ext: 'f4v', mime: 'video/mp4'};
+    // case 'F4P':
+    //   return {ext: 'f4p', mime: 'video/mp4'};
+    // case 'F4A':
+    //   return {ext: 'f4a', mime: 'audio/mp4'};
+    // case 'F4B':
+    //   return {ext: 'f4b', mime: 'audio/mp4'};
+    // case 'crx':
+    //   return {ext: 'cr3', mime: 'image/x-canon-cr3'};
+    // default:
+    // if (brandMajor.startsWith('3g')) {
+    //   if (brandMajor.startsWith('3g2')) {
+    //     return {ext: '3g2', mime: 'video/3gpp2'};
+    //   }
+    //   return {ext: '3gp', mime: 'video/3gpp'};
+    // }
+    // return {ext: 'mp4', mime: 'video/mp4'};
+}
+exports.decodeMajorBrand = decodeMajorBrand;
+/** Interpret a chunk of bytes as a UTF8 string */
+function getUTF8String(array, start, end) {
+    return String.fromCharCode(...array.slice(start, end));
+}
+function stringToBytes(string) {
+    return [...string].map((character) => character.charCodeAt(0));
+}
+function checkString(buffer, header, offset = 0) {
+    const headerBytes = stringToBytes(header);
+    for (let i = 0; i < headerBytes.length; ++i) {
+        if (headerBytes[i] !== buffer[i + offset]) {
+            return false;
+        }
+    }
+    return true;
+}

package/dist/lib/category-api/parsed-image-api.js

@@ -1,64 +1,69 @@
-export function isImage(image) {
-  return Boolean(getImageTypeOrNull(image));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getImageData = exports.getImageSize = exports.getImageType = exports.deleteImage = exports.isImage = void 0;
+function isImage(image) {
+    return Boolean(getImageTypeOrNull(image));
 }
-export function deleteImage(image) {
-  switch (getImageType(image)) {
-    case 'imagebitmap':
-      image.close();
-      break;
-
-    default:
-  }
+exports.isImage = isImage;
+function deleteImage(image) {
+    switch (getImageType(image)) {
+        case 'imagebitmap':
+            image.close();
+            break;
+        default:
+        // Nothing to do for images and image data objects
+    }
 }
-export function getImageType(image) {
-  const format = getImageTypeOrNull(image);
-
-  if (!format) {
-    throw new Error('Not an image');
-  }
-
-  return format;
+exports.deleteImage = deleteImage;
+function getImageType(image) {
+    const format = getImageTypeOrNull(image);
+    if (!format) {
+        throw new Error('Not an image');
+    }
+    return format;
 }
-export function getImageSize(image) {
-  return getImageData(image);
+exports.getImageType = getImageType;
+function getImageSize(image) {
+    return getImageData(image);
 }
-export function getImageData(image) {
-  switch (getImageType(image)) {
-    case 'data':
-      return image;
-
-    case 'image':
-    case 'imagebitmap':
-      const canvas = document.createElement('canvas');
-      const context = canvas.getContext('2d');
-
-      if (!context) {
-        throw new Error('getImageData');
-      }
-
-      canvas.width = image.width;
-      canvas.height = image.height;
-      context.drawImage(image, 0, 0);
-      return context.getImageData(0, 0, image.width, image.height);
-
-    default:
-      throw new Error('getImageData');
-  }
+exports.getImageSize = getImageSize;
+function getImageData(image) {
+    switch (getImageType(image)) {
+        case 'data':
+            return image;
+        case 'image':
+        case 'imagebitmap':
+            // Extract the image data from the image via a canvas
+            const canvas = document.createElement('canvas');
+            // TODO - reuse the canvas?
+            const context = canvas.getContext('2d');
+            if (!context) {
+                throw new Error('getImageData');
+            }
+            // @ts-ignore
+            canvas.width = image.width;
+            // @ts-ignore
+            canvas.height = image.height;
+            // @ts-ignore
+            context.drawImage(image, 0, 0);
+            // @ts-ignore
+            return context.getImageData(0, 0, image.width, image.height);
+        default:
+            throw new Error('getImageData');
+    }
 }
-
+exports.getImageData = getImageData;
+// PRIVATE
+// eslint-disable-next-line complexity
 function getImageTypeOrNull(image) {
-  if (typeof ImageBitmap !== 'undefined' && image instanceof ImageBitmap) {
-    return 'imagebitmap';
-  }
-
-  if (typeof Image !== 'undefined' && image instanceof Image) {
-    return 'image';
-  }
-
-  if (image && typeof image === 'object' && image.data && image.width && image.height) {
-    return 'data';
-  }
-
-  return null;
+    if (typeof ImageBitmap !== 'undefined' && image instanceof ImageBitmap) {
+        return 'imagebitmap';
+    }
+    if (typeof Image !== 'undefined' && image instanceof Image) {
+        return 'image';
+    }
+    if (image && typeof image === 'object' && image.data && image.width && image.height) {
+        return 'data';
+    }
+    return null;
 }
-//# sourceMappingURL=parsed-image-api.js.map

package/dist/lib/encoders/encode-image.d.ts

@@ -1,3 +1,4 @@
+import { ImageDataType } from '../../types';
 /**
  * Returns data bytes representing a compressed image in PNG or JPG format,
  * This data can be saved using file system (f) methods or used in a request.
@@ -6,7 +7,7 @@
  * param opt.type='png' - png, jpg or image/png, image/jpg are valid
  * param mimeType= - Whether to include a data URI header
  */
-export declare function encodeImage(image: any, options?: {
+export declare function encodeImage(image: ImageDataType, options?: {
     [key: string]: any;
 }): Promise<ArrayBuffer>;
 //# sourceMappingURL=encode-image.d.ts.map

package/dist/lib/encoders/encode-image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"encode-image.d.ts","sourceRoot":"","sources":["../../../src/lib/encoders/encode-image.ts"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,wBAAsB,WAAW,CAC/B,KAAK,EAAE,GAAG,EACV,OAAO,CAAC,EAAE;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAC,GAC7B,OAAO,CAAC,WAAW,CAAC,CAOtB"}
+{"version":3,"file":"encode-image.d.ts","sourceRoot":"","sources":["../../../src/lib/encoders/encode-image.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAM1C;;;;;;;GAOG;AACH,wBAAsB,WAAW,CAC/B,KAAK,EAAE,aAAa,EACpB,OAAO,CAAC,EAAE;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAC,GAC7B,OAAO,CAAC,WAAW,CAAC,CAOtB"}

package/dist/lib/encoders/encode-image.js

@@ -1,69 +1,81 @@
-import { getImageSize } from '../category-api/parsed-image-api';
-const {
-  _encodeImageNode
-} = globalThis;
-export async function encodeImage(image, options) {
-  options = options || {};
-  options.image = options.image || {};
-  return _encodeImageNode ? _encodeImageNode(image, {
-    type: options.image.mimeType
-  }) : encodeImageInBrowser(image, options);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.encodeImage = void 0;
+const parsed_image_api_1 = require("../category-api/parsed-image-api");
+// @ts-ignore TS2339: Property does not exist on type
+const { _encodeImageNode } = globalThis;
+/**
+ * Returns data bytes representing a compressed image in PNG or JPG format,
+ * This data can be saved using file system (f) methods or used in a request.
+ * @param image - ImageBitmap Image or Canvas
+ * @param options
+ * param opt.type='png' - png, jpg or image/png, image/jpg are valid
+ * param mimeType= - Whether to include a data URI header
+ */
+async function encodeImage(image, options) {
+    options = options || {};
+    options.image = options.image || {};
+    return _encodeImageNode
+        ? _encodeImageNode(image, { type: options.image.mimeType })
+        : encodeImageInBrowser(image, options);
 }
+exports.encodeImage = encodeImage;
+// In case we get exceptions from canvas.toBlob(resolve, type, quality)
 let qualityParamSupported = true;
-
+/**
+ *
+ * @param image
+ * @param options
+ * @note Based on canvas.toBlob
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob
+ */
 async function encodeImageInBrowser(image, options) {
-  const {
-    mimeType,
-    jpegQuality
-  } = options.image;
-  const {
-    width,
-    height
-  } = getImageSize(image);
-  const canvas = document.createElement('canvas');
-  canvas.width = width;
-  canvas.height = height;
-  drawImageToCanvas(image, canvas);
-  const blob = await new Promise(resolve => {
-    if (jpegQuality && qualityParamSupported) {
-      try {
-        canvas.toBlob(resolve, mimeType, jpegQuality);
-        return;
-      } catch (error) {
-        qualityParamSupported = false;
-      }
+    const { mimeType, jpegQuality } = options.image;
+    const { width, height } = (0, parsed_image_api_1.getImageSize)(image);
+    // create a canvas and resize it to the size of our image
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    drawImageToCanvas(image, canvas);
+    // The actual encoding is done asynchronously with `canvas.toBlob()`
+    const blob = await new Promise((resolve) => {
+        // get it back as a Blob
+        if (jpegQuality && qualityParamSupported) {
+            try {
+                canvas.toBlob(resolve, mimeType, jpegQuality);
+                return;
+            }
+            catch (error) {
+                qualityParamSupported = false;
+            }
+        }
+        canvas.toBlob(resolve, mimeType);
+    });
+    if (!blob) {
+        throw new Error('image encoding failed');
     }
-
-    canvas.toBlob(resolve, mimeType);
-  });
-
-  if (!blob) {
-    throw new Error('image encoding failed');
-  }
-
-  return await blob.arrayBuffer();
+    return await blob.arrayBuffer();
 }
-
 function drawImageToCanvas(image, canvas, x = 0, y = 0) {
-  if (x === 0 && y === 0 && typeof ImageBitmap !== 'undefined' && image instanceof ImageBitmap) {
-    const context = canvas.getContext('bitmaprenderer');
-
-    if (context) {
-      context.transferFromImageBitmap(image);
-      return canvas;
+    // Try optimized path for ImageBitmaps via bitmaprenderer context
+    if (x === 0 && y === 0 && typeof ImageBitmap !== 'undefined' && image instanceof ImageBitmap) {
+        const context = canvas.getContext('bitmaprenderer');
+        if (context) {
+            // transfer the ImageBitmap to it
+            context.transferFromImageBitmap(image);
+            return canvas;
+        }
     }
-  }
-
-  const context = canvas.getContext('2d');
-
-  if (image.data) {
-    const clampedArray = new Uint8ClampedArray(image.data);
-    const imageData = new ImageData(clampedArray, image.width, image.height);
-    context.putImageData(imageData, 0, 0);
+    // Available on most platforms, except IE11 and Andriod WebViews...
+    const context = canvas.getContext('2d');
+    if (image.data) {
+        // ImageData constructor expects clamped array even though getImageData does not return a clamped array...
+        const clampedArray = new Uint8ClampedArray(image.data);
+        const imageData = new ImageData(clampedArray, image.width, image.height);
+        context.putImageData(imageData, 0, 0);
+        return canvas;
+    }
+    // Fall back to generic image/image bitmap rendering path
+    context.drawImage(image, 0, 0);
     return canvas;
-  }
-
-  context.drawImage(image, 0, 0);
-  return canvas;
 }
-//# sourceMappingURL=encode-image.js.map

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

@@ -1,52 +1,57 @@
-import { assert } from '@loaders.gl/loader-utils';
-import { isImageTypeSupported, getDefaultImageType } from '../category-api/image-type';
-import { getImageData } from '../category-api/parsed-image-api';
-import parseToImage from './parse-to-image';
-import parseToImageBitmap from './parse-to-image-bitmap';
-import parseToNodeImage from './parse-to-node-image';
-export default async function parseImage(arrayBuffer, options, context) {
-  options = options || {};
-  const imageOptions = options.image || {};
-  const imageType = imageOptions.type || 'auto';
-  const {
-    url
-  } = context || {};
-  const loadType = getLoadableImageType(imageType);
-  let image;
-
-  switch (loadType) {
-    case 'imagebitmap':
-      image = await parseToImageBitmap(arrayBuffer, options, url);
-      break;
-
-    case 'image':
-      image = await parseToImage(arrayBuffer, options, url);
-      break;
-
-    case 'data':
-      image = await parseToNodeImage(arrayBuffer, options);
-      break;
-
-    default:
-      assert(false);
-  }
-
-  if (imageType === 'data') {
-    image = getImageData(image);
-  }
-
-  return image;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const loader_utils_1 = require("@loaders.gl/loader-utils");
+const image_type_1 = require("../category-api/image-type");
+const parsed_image_api_1 = require("../category-api/parsed-image-api");
+const parse_to_image_1 = __importDefault(require("./parse-to-image"));
+const parse_to_image_bitmap_1 = __importDefault(require("./parse-to-image-bitmap"));
+const parse_to_node_image_1 = __importDefault(require("./parse-to-node-image"));
+// Parse to platform defined image type (data on node, ImageBitmap or HTMLImage on browser)
+// eslint-disable-next-line complexity
+async function parseImage(arrayBuffer, options, context) {
+    options = options || {};
+    const imageOptions = options.image || {};
+    // The user can request a specific output format via `options.image.type`
+    const imageType = imageOptions.type || 'auto';
+    const { url } = context || {};
+    // Note: For options.image.type === `data`, we may still need to load as `image` or `imagebitmap`
+    const loadType = getLoadableImageType(imageType);
+    let image;
+    switch (loadType) {
+        case 'imagebitmap':
+            image = await (0, parse_to_image_bitmap_1.default)(arrayBuffer, options, url);
+            break;
+        case 'image':
+            image = await (0, parse_to_image_1.default)(arrayBuffer, options, url);
+            break;
+        case 'data':
+            // Node.js loads imagedata directly
+            image = await (0, parse_to_node_image_1.default)(arrayBuffer, options);
+            break;
+        default:
+            (0, loader_utils_1.assert)(false);
+    }
+    // Browser: if options.image.type === 'data', we can now extract data from the loaded image
+    if (imageType === 'data') {
+        image = (0, parsed_image_api_1.getImageData)(image);
+    }
+    return image;
 }
-
+exports.default = parseImage;
+// Get a loadable image type from image type
 function getLoadableImageType(type) {
-  switch (type) {
-    case 'auto':
-    case 'data':
-      return getDefaultImageType();
-
-    default:
-      isImageTypeSupported(type);
-      return type;
-  }
+    switch (type) {
+        case 'auto':
+        case 'data':
+            // Browser: For image data we need still need to load using an image format
+            // Node: the default image type is `data`.
+            return (0, image_type_1.getDefaultImageType)();
+        default:
+            // Throw an error if not supported
+            (0, image_type_1.isImageTypeSupported)(type);
+            return type;
+    }
 }
-//# sourceMappingURL=parse-image.js.map