implementing thumbnail generation

backend/middlewares/GalleryMWs.ts

@@ -33,8 +33,6 @@ export class GalleryMWs {
 
 
     public static loadImage(req:Request, res:Response, next:NextFunction){
-        console.log("loadImage");
-        console.log(req.params);
         if(!(req.params.imagePath)){
             return next();
         }
@@ -48,10 +46,8 @@ export class GalleryMWs {
         return next();
     }
 
-    public static loadThumbnail(req:Request, res:Response, next:NextFunction){
+    
-        //TODO: implement
+  
-        return next(new Error(ErrorCodes.GENERAL_ERROR));
-    }
 
     public static search(req:Request, res:Response, next:NextFunction){
         //TODO: implement

backend/middlewares/ThumbnailGeneratorMWs.ts

@@ -0,0 +1,45 @@
+
+import * as path from 'path';
+import * as Jimp from 'jimp';
+import * as crypto from 'crypto';
+import * as fs from 'fs';
+import {NextFunction, Request, Response} from "express";
+import {Error, ErrorCodes} from "../../common/entities/Error";
+
+export class ThumbnailGeneratorMWs {
+
+    public static generateThumbnail(req:Request, res:Response, next:NextFunction){ 
+        if(!req.resultPipe)
+            return next();
+
+        let imagePath = req.resultPipe;
+        let size:number = parseInt(req.params.size) || 200; //TODO:put to config
+
+
+        let thPath = path.join(__dirname,"/../../demo/TEMP",ThumbnailGeneratorMWs.generateThumbnailName(imagePath,size));
+        req.resultPipe = thPath;
+
+        if(fs.existsSync(thPath) === true){ 
+            return next();
+        }
+
+        Jimp.read(imagePath).then( (image) => {
+            if (image.bitmap.with < image.bitmap.height) {
+                image.resize(size, Jimp.AUTO);   // resize
+            }else{
+                image.resize(Jimp.AUTO, size);   // resize
+            }
+
+            image.quality(60);        // set JPEG quality
+            image.write(thPath, () =>{ // save
+                return next();
+            });     
+        }).catch(function (err) {
+            return next(new Error(ErrorCodes.GENERAL_ERROR)); 
+        });
+    }
+
+    private static generateThumbnailName(imagePath:string,size:number):string{
+        return crypto.createHash('md5').update(imagePath).digest('hex')+"_"+size+".jpg";
+    }
+}

backend/routes/GalleryRouter.ts

@@ -3,6 +3,7 @@
 import {AuthenticationMWs} from "../middlewares/AuthenticationMWs";
 import {GalleryMWs} from "../middlewares/GalleryMWs";
 import {RenderingMWs} from "../middlewares/RenderingMWs";
+import {ThumbnailGeneratorMWs} from "../middlewares/ThumbnailGeneratorMWs";
 
 export class GalleryRouter{
     constructor(private app){
@@ -33,9 +34,10 @@ export class GalleryRouter{
     };
 
     private addGetImageThumbnail() {
-        this.app.get("/api/gallery/:directory/:image/thumbnail",
+        this.app.get("/api/gallery/:imagePath(*\.(jpg|bmp|png|gif|jpeg))/thumbnail/:size?",
             AuthenticationMWs.authenticate,
-            GalleryMWs.loadThumbnail,
+            GalleryMWs.loadImage,
+            ThumbnailGeneratorMWs.generateThumbnail,
             RenderingMWs.renderFile
         );
     };

frontend/app/gallery/photo/photo.gallery.component.ts

@@ -17,7 +17,7 @@ export class GalleryPhotoComponent{
     }
 
     getPhotoPath(){
-        return Utils.concatUrls("/api/gallery",this.directory.path,this.directory.name,this.photo.name); 
+        return Utils.concatUrls("/api/gallery",this.directory.path,this.directory.name,this.photo.name,"thumbnail");
     }
     
 }

frontend/index.html

@@ -5,41 +5,6 @@
     <meta charset="UTF-8">
     <title>PiGallery2</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <!-- IE required polyfills, in this exact order - ->
-    <script src="../node_modules/es6-shim/es6-shim.min.js"></script>
-    <script src="../node_modules/systemjs/dist/system-polyfills.js"></script>
-    <script src="../node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
-
-    <script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
-    <script src="../node_modules/systemjs/dist/system.src.js"></script>
-    <script src="../node_modules/rxjs/bundles/Rx.js"></script>
-    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
-    <!-- IE required polyfills, in this exact order - ->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
-    <script src="https://npmcdn.com/angular2@2.0.0-beta.9/es6/dev/src/testing/shims_for_IE.js"></script>
-
-    <script src="https://code.angularjs.org/2.0.0-beta.9/angular2-polyfills.js"></script>
-    <script src="https://code.angularjs.org/tools/system.js"></script>
-    <script src="https://npmcdn.com/typescript@1.8.2/lib/typescript.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.9/Rx.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.9/angular2.dev.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.9/router.dev.js"></script>
- <!--   <script>
-        System.config({
-            map: {
-                "ts": "../node_modules/typescript/lib/plugin.js",
-                "typescript": "../node_modules/typescript/lib/typescript.js"
-            },
-            transpiler: 'typescript',
-            typescriptOptions: { emitDecoratorMetadata: true },
-            packages: {'app': {defaultExtension: 'ts'}}
-        });
-        System.import('main.ts')
-                .then(null, console.error.bind(console));
-    </script>
--->
 <body>
 <pi-gallery2-app>Loading...</pi-gallery2-app>
 </body>

package.json

@@ -27,6 +27,7 @@
     "debug": "^2.2.0",
     "express": "^4.13.4",
     "express-session": "^1.13.0",
+    "jimp": "^0.2.21",
     "mime": "^1.3.4",
     "morgan": "^1.7.0",
     "ng2-cookies": "^0.1.5",