From 5eb495f986ddfb715b7ac3f1e81dd1b2e1afade8 Mon Sep 17 00:00:00 2001 From: Braun Patrik Date: Tue, 29 Mar 2016 21:46:44 +0200 Subject: [PATCH] implementing thumbnail generation --- backend/middlewares/GalleryMWs.ts | 10 ++--- backend/middlewares/ThumbnailGeneratorMWs.ts | 45 +++++++++++++++++++ backend/routes/GalleryRouter.ts | 6 ++- .../gallery/photo/photo.gallery.component.ts | 2 +- frontend/index.html | 35 --------------- package.json | 1 + 6 files changed, 54 insertions(+), 45 deletions(-) create mode 100644 backend/middlewares/ThumbnailGeneratorMWs.ts diff --git a/backend/middlewares/GalleryMWs.ts b/backend/middlewares/GalleryMWs.ts index 2e8f357d..9c026879 100644 --- a/backend/middlewares/GalleryMWs.ts +++ b/backend/middlewares/GalleryMWs.ts @@ -4,7 +4,7 @@ import * as fs from 'fs'; import {NextFunction, Request, Response} from "express"; import {Error, ErrorCodes} from "../../common/entities/Error"; import {GalleryManager} from "../model/GalleryManager"; -import {Directory} from "../../common/entities/Directory"; +import {Directory} from "../../common/entities/Directory"; export class GalleryMWs { @@ -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 diff --git a/backend/middlewares/ThumbnailGeneratorMWs.ts b/backend/middlewares/ThumbnailGeneratorMWs.ts new file mode 100644 index 00000000..df17060b --- /dev/null +++ b/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"; + } +} \ No newline at end of file diff --git a/backend/routes/GalleryRouter.ts b/backend/routes/GalleryRouter.ts index e4e5ca08..5c02c61b 100644 --- a/backend/routes/GalleryRouter.ts +++ b/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 ); }; diff --git a/frontend/app/gallery/photo/photo.gallery.component.ts b/frontend/app/gallery/photo/photo.gallery.component.ts index 64625387..0a0e3016 100644 --- a/frontend/app/gallery/photo/photo.gallery.component.ts +++ b/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"); } } diff --git a/frontend/index.html b/frontend/index.html index f33b7c2e..9d745f0e 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -5,41 +5,6 @@ PiGallery2 - - Loading... diff --git a/package.json b/package.json index e1bed91f..2ef4bf62 100644 --- a/package.json +++ b/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",