Generate MIME from signature

Secondary fallback in fixupInvalidMediaType - generate the mime based off the signature (magic number) at the start of the object. Comparison done in Base64 for human readability.

Author: Kiradien

plugin/js/EpubItem.js

@@ -186,6 +186,18 @@ class ImageInfo extends EpubItem {
         return util.makeStorageFileName("OEBPS/Images/", that.index, that.getImageName(that.wrappingUrl), suffix);
     }
 
+    getBase64(maxLength) {
+        var binary = '';
+        var bytes = new Uint8Array(this.arraybuffer);
+        var len = bytes.byteLength;
+        if (maxLength > 0) len = Math.min(len, maxLength);
+        for (var i = 0; i < len; i++)
+        {
+            binary += String.fromCharCode(bytes[i]);
+        }
+        return window.btoa( binary );
+    }
+
     getId() {
         if (this.isCover) {
             return "cover-image";

plugin/js/ImageCollector.js

@@ -381,8 +381,8 @@ class ImageCollector {
             let xhr = await HttpClient.wrapFetch(initialUrl, fetchOptions);
             xhr = await this.findImageFileUrl(xhr, imageInfo, imageInfo.dataOrigFileUrl, fetchOptions);
             imageInfo.mediaType = xhr.contentType;
-            this.fixupInvalidMediaType(imageInfo);
             imageInfo.arraybuffer = xhr.arrayBuffer;
+            this.fixupInvalidMediaType(imageInfo);
             {
                 let img = await this.getImageDimensions(imageInfo);
                 await this.runCompression(imageInfo, img);
@@ -400,12 +400,16 @@ class ImageCollector {
 
     fixupInvalidMediaType(imageInfo) {
         if (!imageInfo.mediaType?.startsWith("image")) {
-            let path = new URL(imageInfo.sourceUrl).pathname;
-            let index = path.lastIndexOf(".");
-            let format = (index < 0)
-                ? "jpeg"
-                : path.substring(index + 1);
-            imageInfo.mediaType = "image/" + format;
+            imageInfo.mediaType = util.detectMimeType(imageInfo.getBase64(25));
+            if (imageInfo.mediaType == null)
+            {
+                let path = new URL(imageInfo.sourceUrl).pathname;
+                let index = path.lastIndexOf(".");
+                let format = (index < 0)
+                    ? "jpeg"
+                    : path.substring(index + 1);
+                imageInfo.mediaType = "image/" + format;
+            }
         }
     }
 

plugin/js/Util.js

@@ -1047,6 +1047,13 @@ const util = (function() {
         if (retval) retval = retval[0];
         return retval;
     }
+    function detectMimeType(b64) {
+        for (var s in MIME_TYPE_SIGNATURES) {
+            if (b64.indexOf(s) === 0) {
+                return MIME_TYPE_SIGNATURES[s][0];
+            }
+        }
+    }
 
     function sanitize(dirty) {
         const clean = DOMPurify.sanitize(dirty, { USE_PROFILES: { html: true } });
@@ -1103,6 +1110,31 @@ const util = (function() {
         "image/avif": ["avif"]
     };
 
+    const MIME_TYPE_SIGNATURES = {
+        "/9j/": ["image/jpeg"],
+        "iVBORw0KGgo=": ["image/png", "image/apng"],
+        "R0lGODdh": ["image/gif"],
+        "R0lGODlh": ["image/gif"],
+        "UklGR": ["image/webp"],
+        "Qk0=": ["image/bmp"],
+        "SUkqAA==": ["image/tiff"],
+        "TU0AKg==": ["image/tiff"],
+        "PD94bWw=": ["image/svg+xml"],
+        "AAABAA==": ["image/x-icon", "image/vnd.microsoft.icon"],
+        "ZnR5cGhlaWZj": ["image/heif"],
+        "ZnR5cG1pZjE=": ["image/heif"],
+        "ZnR5cGhlaWNj": ["image/heic"],
+        "SUm8": ["image/jxr"],
+        "q0tUWCAxMb0NCgo=": ["image/ktx"],
+        "AAACAA==": ["image/x-tga"],
+        "ZnR5cGF2aWY=": ["image/avif"],
+        "UDAx": ["image/x-portable-bitmap"],
+        "UDAy": ["image/x-portable-graymap"],
+        "UDAz": ["image/x-portable-pixmap"],
+        "UDA0": ["image/x-portable-anymap"],
+        "WaZqlQ==": ["image/x-cmu-raster"]
+    };
+
     return {
         XMLNS: XMLNS,
         INLINE_ELEMENTS: INLINE_ELEMENTS,
@@ -1209,6 +1241,7 @@ const util = (function() {
         removeSpansWithNoAttributes: removeSpansWithNoAttributes,
         replaceSemanticInlineStylesWithTags: replaceSemanticInlineStylesWithTags,
         wrapInnerContentInTag: wrapInnerContentInTag,
-        getDefaultExtensionByMime: getDefaultExtensionByMime
+        getDefaultExtensionByMime: getDefaultExtensionByMime,
+        detectMimeType: detectMimeType
     };
 })();