added tiff preprocessor to demo

VolodymyrBaydalka · May 5, 2024 · 22430b1 · 22430b1
1 parent e8d6f15
commit 22430b1
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 7 deletions.
diff --git a/demo/tiff-preprocessor.js b/demo/tiff-preprocessor.js
@@ -0,0 +1,16 @@
+async function preprocessTiff(blob) {
+    let zip = await  JSZip.loadAsync(blob);
+    const tiffs = zip.file(/[.]tiff?$/);
+
+    if (tiffs.length == 0)
+        return blob;
+
+    for (let f of tiffs) {
+        const buffer = await f.async("uint8array");
+        const tiff = new Tiff({ buffer });
+        const blob = await new Promise(res => tiff.toCanvas().toBlob(blob => res(blob), "image/png"));
+        zip.file(f.name, blob);
+    }
+
+    return await zip.generateAsync({ type: "blob" });
+}
diff --git a/index.html b/index.html
@@ -16,6 +16,8 @@
     <!--thumbnail example-->
     <script src="./demo/thumbnail.example.js"></script>
     <link href="./demo/thumbnail.example.css" rel="stylesheet">
+    <script crossorigin src="https://unpkg.com/tiff.js@1.0.0/tiff.min.js"></script>
+    <script src="./demo/tiff-preprocessor.js"></script>
 </head>
 
 <body class="vh-100 d-flex flex-column">
@@ -55,25 +57,30 @@
         let currentDocument = null;
         const docxOptions = Object.assign(docx.defaultOptions, {
             debug: true,
-            experimental: true
+            experimental: true,
+            processMedia: (...args) => {
+                console.log(args);
+                return args[0];
+            }
         });
 
         const container = document.querySelector("#document-container");
         const fileInput = document.querySelector("#files");
         const loadButton = document.querySelector("#loadButton");
         const testDocuments = document.querySelector("#testDocuments");
 
-        function renderDocx(file) {
+        async function renderDocx(file) {
             currentDocument = file; 
 
             if (!currentDocument) 
                 return;
 
-            docx.renderAsync(currentDocument, container, null, docxOptions)
-                .then((x) => {
-                    renderThumbnails(container, document.querySelector("#thumbnails-container"));
-                    console.log(x);
-                });
+            let blob = preprocessTiff(currentDocument);
+            let doc = await docx.parseAsync(blob, docxOptions);
+            await docx.renderDocument(doc, container, null, docxOptions);
+
+            renderThumbnails(container, document.querySelector("#thumbnails-container"));
+            console.log(doc);
         }
 
         fileInput.addEventListener("change", ev => {