YES

5 files changed, 92 insertions, 24 deletions

diff --git a/package.json b/package.json
index 58b2cb049..648ebdbf9 100644
--- a/package.json
+++ b/package.json
@@ -101,6 +101,7 @@
         "bluebird": "^3.5.3",
         "body-parser": "^1.18.3",
         "bootstrap": "^4.3.1",
+        "canvas": "^2.5.0",
         "class-transformer": "^0.2.0",
         "connect-flash": "^0.1.1",
         "connect-mongo": "^2.0.3",
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 217d7b5e1..7e335e75e 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -14,7 +14,7 @@ import { FieldView, FieldViewProps } from './FieldView';
 import { pageSchema } from "./ImageBox";
 import "./PDFBox.scss";
 import React = require("react");
-import { NumCast } from "../../../new_fields/Types";
+import { NumCast, StrCast } from "../../../new_fields/Types";
 import { makeInterface } from "../../../new_fields/Schema";
 import { PDFViewer } from "../pdf/PDFViewer";
 
@@ -77,7 +77,7 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
 
     render() {
         trace();
-        const pdfUrl = window.origin + RouteStore.corsProxy + "/https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf";
+        const pdfUrl = window.origin + RouteStore.corsProxy + "/" + StrCast(this.props.Document.title);
         let classname = "pdfBox-cont" + (this.props.isSelected() && !InkingControl.Instance.selectedTool && !this._alt ? "-interactive" : "");
         return (
             <div onScroll={this.onScroll} style={{ overflow: "scroll", height: `${NumCast(this.props.Document.nativeWidth ? this.props.Document.nativeWidth : 300)}px` }} onWheel={(e: React.WheelEvent) => e.stopPropagation()} className={classname}>
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 999cb6378..374e598a4 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -91,24 +91,24 @@ class Viewer extends React.Component<IViewerProps> {
     }
 
     saveThumbnail = () => {
-        this.props.parent.props.Document.thumbnailY = FieldValue(this.scrollY, 0);
-        this._renderAsSvg = false;
-        setTimeout(() => {
-            let nwidth = FieldValue(this.props.parent.Document.nativeWidth, 0);
-            htmlToImage.toPng(this.props.mainCont.current!, { width: nwidth, height: nwidth, quality: 0.8, })
-                .then(action((dataUrl: string) => {
-                    SearchBox.convertDataUri(dataUrl, `icon${this.props.parent.Document[Id]}_${this.startIndex}`).then((returnedFilename) => {
-                        if (returnedFilename) {
-                            let url = DocServer.prepend(returnedFilename);
-                            this.props.parent.props.Document.thumbnail = new ImageField(new URL(url));
-                        }
-                        runInAction(() => this._renderAsSvg = true);
-                    });
-                }))
-                .catch(function (error: any) {
-                    console.error("Oops, something went wrong!", error);
-                });
-        }, 1250);
+        // this.props.parent.props.Document.thumbnailY = FieldValue(this.scrollY, 0);
+        // this._renderAsSvg = false;
+        // setTimeout(() => {
+        //     let nwidth = FieldValue(this.props.parent.Document.nativeWidth, 0);
+        //     htmlToImage.toPng(this.props.mainCont.current!, { width: nwidth, height: nwidth, quality: 0.8, })
+        //         .then(action((dataUrl: string) => {
+        //             SearchBox.convertDataUri(dataUrl, `icon${this.props.parent.Document[Id]}_${this.startIndex}`).then((returnedFilename) => {
+        //                 if (returnedFilename) {
+        //                     let url = DocServer.prepend(returnedFilename);
+        //                     this.props.parent.props.Document.thumbnail = new ImageField(new URL(url));
+        //                 }
+        //                 runInAction(() => this._renderAsSvg = true);
+        //             });
+        //         }))
+        //         .catch(function (error: any) {
+        //             console.error("Oops, something went wrong!", error);
+        //         });
+        // }, 1250);
     }
 
     @computed get scrollY(): number {
@@ -338,15 +338,23 @@ class Page extends React.Component<IPageProps> {
         let scale = 1;
         let viewport = page.getViewport(scale);
         let canvas = this.canvas.current;
-        if (canvas) {
-            let context = canvas.getContext("2d");
+        let tempCanvas = document.createElement('canvas')
+        if (tempCanvas && canvas) {
+            let ctx = canvas.getContext("2d");
+            let context = tempCanvas.getContext("2d");
+            tempCanvas.width = viewport.width;
             canvas.width = viewport.width;
             this._width = viewport.width;
+            tempCanvas.height = viewport.height;
             canvas.height = viewport.height;
             this._height = viewport.height;
             this.props.pageLoaded(this._currPage, viewport);
             if (context) {
-                page.render({ canvasContext: context, viewport: viewport });
+                page.render({ canvasContext: context, viewport: viewport }).promise.then(() => {
+                    if (context && ctx) {
+                        ctx.putImageData(context.getImageData(0, 0, tempCanvas.width, tempCanvas.height), 0, 0);
+                    }
+                });
                 page.getTextContent().then((res: Pdfjs.TextContent) => {
                     //@ts-ignore
                     let textLayer = Pdfjs.renderTextLayer({
diff --git a/src/server/Search.ts b/src/server/Search.ts
index 5ca5578a7..fd6ef36a6 100644
--- a/src/server/Search.ts
+++ b/src/server/Search.ts
@@ -7,6 +7,7 @@ export class Search {
     private url = 'http://localhost:8983/solr/';
 
     public async updateDocument(document: any) {
+        return;
         try {
             const res = await rp.post(this.url + "dash/update", {
                 headers: { 'content-type': 'application/json' },
@@ -14,7 +15,7 @@ export class Search {
             });
             return res;
         } catch (e) {
-            console.warn("Search error: " + e + document);
+            // console.warn("Search error: " + e + document);
         }
     }
 
diff --git a/src/server/index.ts b/src/server/index.ts
index fd66c90b4..9f95df4e0 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -7,6 +7,7 @@ import * as expressValidator from 'express-validator';
 import * as formidable from 'formidable';
 import * as fs from 'fs';
 import * as sharp from 'sharp';
+import * as Pdfjs from 'pdfjs-dist';
 const imageDataUri = require('image-data-uri');
 import * as mobileDetect from 'mobile-detect';
 import { ObservableMap } from 'mobx';
@@ -28,6 +29,7 @@ import { MessageStore, Transferable, Types, Diff } from "./Message";
 import { RouteStore } from './RouteStore';
 const app = express();
 const config = require('../../webpack.config');
+import { createCanvas, loadImage, Canvas } from "canvas";
 const compiler = webpack(config);
 const port = 1050; // default port to listen
 const serverPort = 4321;
@@ -168,7 +170,31 @@ addSecureRoute(
     RouteStore.getCurrUser
 );
 
+class NodeCanvasFactory {
+    create = (width: number, height: number) => {
+        var canvas = createCanvas(width, height);
+        var context = canvas.getContext('2d');
+        return {
+            canvas: canvas,
+            context: context,
+        };
+    }
+
+    reset = (canvasAndContext: any, width: number, height: number) => {
+        canvasAndContext.canvas.width = width;
+        canvasAndContext.canvas.height = height;
+    }
+
+    destroy = (canvasAndContext: any) => {
+        canvasAndContext.canvas.width = 0;
+        canvasAndContext.canvas.height = 0;
+        canvasAndContext.canvas = null;
+        canvasAndContext.context = null;
+    }
+}
+
 const pngTypes = [".png", ".PNG"];
+const pdfTypes = [".pdf", ".PDF"];
 const jpgTypes = [".jpg", ".JPG", ".jpeg", ".JPEG"];
 const uploadDir = __dirname + "/public/files/";
 // SETTERS
@@ -203,6 +229,38 @@ app.post(
                     });
                     isImage = true;
                 }
+                else if (pdfTypes.includes(ext)) {
+                    Pdfjs.getDocument(uploadDir + file).promise
+                        .then((pdf: Pdfjs.PDFDocumentProxy) => {
+                            let numPages = pdf.numPages;
+                            let factory = new NodeCanvasFactory();
+                            for (let pageNum = 0; pageNum < numPages; pageNum++) {
+                                console.log(pageNum);
+                                pdf.getPage(pageNum + 1).then((page: Pdfjs.PDFPageProxy) => {
+                                    console.log("reading " + pageNum);
+                                    let viewport = page.getViewport(1);
+                                    let canvasAndContext = factory.create(viewport.width, viewport.height);
+                                    let renderContext = {
+                                        canvasContext: canvasAndContext.context,
+                                        viewport: viewport,
+                                        canvasFactory: factory
+                                    }
+                                    console.log("read " + pageNum);
+
+                                    page.render(renderContext).promise
+                                        .then(() => {
+                                            console.log("saving " + pageNum);
+                                            let stream = canvasAndContext.canvas.createPNGStream();
+                                            let out = fs.createWriteStream(uploadDir + file.substring(0, file.length - ext.length) + `-${pageNum + 1}.PNG`);
+                                            stream.pipe(out);
+                                            out.on("finish", () => console.log(`Success! Saved to ${uploadDir + file.substring(0, file.length - ext.length) + `-${pageNum + 1}.PNG`}`));
+                                        }, (reason: string) => {
+                                            console.error(reason + ` ${pageNum}`);
+                                        });
+                                });
+                            }
+                        });
+                }
                 if (isImage) {
                     resizers.forEach(resizer => {
                         fs.createReadStream(uploadDir + file).pipe(resizer.resizer).pipe(fs.createWriteStream(uploadDir + file.substring(0, file.length - ext.length) + resizer.suffix + ext));