@loaders.gl/images 3.4.0-alpha.1 → 3.4.0-alpha.2

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

@@ -1,66 +1,119 @@
+// loaders.gl, MIT license
+
 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'];
+const MIME_TYPES = [
+  'image/png',
+  'image/jpeg',
+  'image/gif',
+  'image/webp',
+  'image/avif',
+  'image/tiff',
+  // TODO - what is the correct type for SVG
+  'image/svg',
+  'image/svg+xml',
+  'image/bmp',
+  'image/vnd.microsoft.icon'
+];
+
+/** Only one round of tests is performed */
+const mimeTypeSupportedPromise: Promise<Set<string>> | null = null;
+
+/** Run-time browser detection of file formats requires async tests for most precise results */
+export async function getSupportedImageFormats(): Promise<Set<string>> {
+  if (mimeTypeSupportedPromise) {
+    return await mimeTypeSupportedPromise;
+  }
 
-/** Cache values for speed */
-const mimeTypeSupported: {[mimeType: string]: boolean} = {};
+  const supportedMimeTypes = new Set<string>();
+  for (const mimeType of MIME_TYPES) {
+    const supported = isBrowser
+      ? await checkBrowserImageFormatSupportAsync(mimeType)
+      : checkNodeImageFormatSupport(mimeType);
+    if (supported) {
+      supportedMimeTypes.add(mimeType);
+    }
+  }
+
+  return supportedMimeTypes;
+}
+
+/** Cache sync values for speed */
+const mimeTypeSupportedSync: {[mimeType: string]: boolean} = {};
 
 /**
- * Check if image MIME type is supported. Result is cached.
+ * Check if image MIME type is supported. Result is cached to avoid repeated tests.
  */
-export function _isImageFormatSupported(mimeType: string): boolean {
-  if (mimeTypeSupported[mimeType] === undefined) {
-    mimeTypeSupported[mimeType] = checkFormatSupport(mimeType);
+export function isImageFormatSupported(mimeType: string): boolean {
+  if (mimeTypeSupportedSync[mimeType] === undefined) {
+    const supported = isBrowser
+      ? checkBrowserImageFormatSupport(mimeType)
+      : checkNodeImageFormatSupport(mimeType);
+    mimeTypeSupportedSync[mimeType] = supported;
   }
-  return mimeTypeSupported[mimeType];
+  return mimeTypeSupportedSync[mimeType];
 }
 
 /**
- * Check if image MIME type is supported.
+ * Checks that polyfills are installed and that mimeType is supported by polyfills
+ * @todo Ideally polyfills should declare what formats they support, instead of storing that data here.
+ */
+function checkNodeImageFormatSupport(mimeType: string): boolean {
+  /** @deprecated Remove these in 4.0 and rely on polyfills to inject them */
+  const NODE_FORMAT_SUPPORT = ['image/png', 'image/jpeg', 'image/gif'];
+  // @ts-ignore
+  const {_parseImageNode, _imageFormatsNode = NODE_FORMAT_SUPPORT} = globalThis;
+  return Boolean(_parseImageNode) && _imageFormatsNode.includes(mimeType);
+}
+
+/** Checks image format support synchronously.
+ * @note Unreliable, fails on AVIF
  */
-function checkFormatSupport(mimeType: string): boolean {
+function checkBrowserImageFormatSupport(mimeType: string): boolean {
   switch (mimeType) {
+    case 'image/avif': // Will fail
     case 'image/webp':
-      return checkWebPSupport();
-    case 'image/svg':
-      return isBrowser;
+      return testBrowserImageFormatSupport(mimeType);
     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;
-  }
+const TEST_IMAGE = {
+  'image/avif':
+    'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=',
+  // Lossy test image. Support for lossy images doesn't guarantee support for all WebP images.
+  'image/webp': 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA'
+};
+
+/** Checks WebP and AVIF support asynchronously */
+async function checkBrowserImageFormatSupportAsync(mimeType: string): Promise<boolean> {
+  const dataURL = TEST_IMAGE[mimeType];
+  return dataURL ? await testBrowserImageFormatSupportAsync(dataURL) : true;
+}
+
+/**
+ * Checks browser synchronously
+ * Checks if toDataURL supports the mimeType.
+ * @note Imperfect testOn Chrome this is true for WebP but not for AVIF
+ */
+function testBrowserImageFormatSupport(mimeType: string): boolean {
   try {
     const element = document.createElement('canvas');
-    return element.toDataURL('image/webp').indexOf('data:image/webp') === 0;
+    const dataURL = element.toDataURL(mimeType);
+    return dataURL.indexOf(`data:${mimeType}`) === 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 );
-//   }
-// }
+async function testBrowserImageFormatSupportAsync(testImageDataURL: string): Promise<boolean> {
+  return new Promise((resolve) => {
+    const image = new Image();
+    image.src = testImageDataURL;
+    image.onload = () => resolve(image.height > 0);
+    image.onerror = () => resolve(false);
+  });
+}

package/src/lib/category-api/parse-isobmff-binary.ts

@@ -0,0 +1,105 @@
+// loaders.gl, MIT license
+// code adapted from https://github.com/sindresorhus/file-type under MIT license
+
+/**
+ * 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 function getISOBMFFMediaType(buffer: Uint8Array): BoxFileType | null {
+  // 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);
+}
+
+/**
+ * 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 function decodeMajorBrand(buffer: Uint8Array): BoxFileType | null {
+  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'};
+}
+
+/** Interpret a chunk of bytes as a UTF8 string */
+function getUTF8String(array: Uint8Array, start: number, end: number): string {
+  return String.fromCharCode(...array.slice(start, end));
+}
+
+function stringToBytes(string: string): number[] {
+  return [...string].map((character) => character.charCodeAt(0));
+}
+
+function checkString(buffer: ArrayLike<number>, header: string, offset: number = 0): boolean {
+  const headerBytes = stringToBytes(header);
+
+  for (let i = 0; i < headerBytes.length; ++i) {
+    if (headerBytes[i] !== buffer[i + offset]) {
+      return false;
+    }
+  }
+
+  return true;
+}