Merge pull request #315 from gastrohero/feature/image-caching-and-image-prossesing

Implemented basic image processing/caching factories

Author: pkarw

config/default.json

@@ -72,7 +72,7 @@
         "deprecatedPriceFieldsSupport": true,
         "calculateServerSide": true,
         "sourcePriceIncludesTax": false,
-		    "finalPriceIncludesTax": true        
+		    "finalPriceIncludesTax": true
       },
       "i18n": {
         "fullCountryName": "Germany",
@@ -223,7 +223,17 @@
       "process": 4
     },
     "simd": true,
-    "keepDownloads": true
+    "keepDownloads": true,
+    "caching": {
+      "active": false,
+      "type": "file",
+      "file": {
+        "path": "/tmp/vue-storefront-api"
+      }
+    },
+    "action": {
+      "type": "local"
+    }
   },
   "entities": {
       "category": {

package.json

@@ -68,6 +68,7 @@
     "elasticsearch": "^15.2.0",
     "email-check": "^1.1.0",
     "express": "^4.16.3",
+    "fs-extra": "^8.1.0",
     "graphql": "^0.10.1",
     "graphql-tools": "^1.2.1",
     "humps": "^1.1.0",

src/api/img.js

@@ -1,127 +1,48 @@
 // @ts-check
-import { downloadImage, fit, identify, resize } from '../lib/image';
-import mime from 'mime-types';
-import URL from 'url';
-
-const SUPPORTED_ACTIONS = ['fit', 'resize', 'identify'];
-const SUPPORTED_MIMETYPES = ['image/gif', 'image/png', 'image/jpeg', 'image/webp', 'image/svg+xml'];
-const ONE_YEAR = 31557600000;
+import CacheFactory from "../image/cache/factory";
+import ActionFactory from "../image/action/factory";
 
 const asyncMiddleware = fn => (req, res, next) => {
   Promise.resolve(fn(req, res, next)).catch(next);
 };
 
 export default ({ config, db }) =>
-  asyncMiddleware(async (req, res, body) => {
+  asyncMiddleware(async (req, res, next) => {
     if (!(req.method == 'GET')) {
       res.set('Allow', 'GET');
       return res.status(405).send('Method Not Allowed');
     }
+    const cacheFactory = new CacheFactory(config, req)
 
     req.socket.setMaxListeners(config.imageable.maxListeners || 50);
-    
-    let width
-    let height
-    let action
-    let imgUrl
-
-    if (req.query.url) { // url provided as the query param
-      imgUrl = decodeURIComponent(req.query.url)
-      width = parseInt(req.query.width)
-      height = parseInt(req.query.height)
-      action = req.query.action
-    } else {
-      let urlParts = req.url.split('/');
-      width = parseInt(urlParts[1]);
-      height = parseInt(urlParts[2]);
-      action = urlParts[3];
-      imgUrl = `${config[config.platform].imgUrl}/${urlParts.slice(4).join('/')}`; // full original image url
-  
-      if (urlParts.length < 4) {
-        return res.status(400).send({
-          code: 400,
-          result: 'Please provide following parameters: /img/<width>/<height>/<action:fit,resize,identify>/<relative_url>'
-        });
-      }
-    }
 
+    let imageBuffer
 
-    if (isNaN(width) || isNaN(height) || !SUPPORTED_ACTIONS.includes(action)) {
-      return res.status(400).send({
-        code: 400,
-        result: 'Please provide following parameters: /img/<width>/<height>/<action:fit,resize,identify>/<relative_url> OR ?url=&width=&height=&action='
-      });
-    }
-
-    if (width > config.imageable.imageSizeLimit || width < 0 || height > config.imageable.imageSizeLimit || height < 0) {
-      return res.status(400).send({
-        code: 400,
-        result: `Width and height must have a value between 0 and ${config.imageable.imageSizeLimit}`
-      });
-    }
-
-    if (!isImageSourceHostAllowed(imgUrl, config.imageable.whitelist)) {
-      return res.status(400).send({
-        code: 400,
-        result: `Host is not allowed`
-      });
-    }
+    const actionFactory =  new ActionFactory(req , res, next, config)
+    const imageAction =  actionFactory.getAdapter(config.imageable.action.type)
+    imageAction.getOption()
+    imageAction.validateOptions()
+    imageAction.isImageSourceHostAllowed()
+    imageAction.validateMIMEType()
 
-    const mimeType = mime.lookup(imgUrl);
+    const cache = cacheFactory.getAdapter(config.imageable.caching.type)
 
-    if (mimeType === false || !SUPPORTED_MIMETYPES.includes(mimeType)) {
-      return res.status(400).send({
-        code: 400,
-        result: 'Unsupported file type'
-      });
-    }
+    if (config.imageable.caching.active && await cache.check()) {
+      await cache.getImageFromCache()
+      imageBuffer = cache.image
+    } else {
+      await imageAction.prossesImage()
 
-    console.log(`[URL]: ${imgUrl} - [ACTION]: ${action} - [WIDTH]: ${width} - [HEIGHT]: ${height}`);
+      if (config.imageable.caching.active) {
+        cache.image = imageAction.imageBuffer
+        await cache.save()
+      }
 
-    let buffer;
-    try {
-      buffer = await downloadImage(imgUrl);
-    } catch (err) {
-      return res.status(400).send({
-        code: 400,
-        result: `Unable to download the requested image ${imgUrl}`
-      });
+      imageBuffer = imageAction.imageBuffer
     }
 
-    switch (action) {
-      case 'resize':
-        return res
-          .type(mimeType)
-          .set({ 'Cache-Control': `max-age=${ONE_YEAR}` })
-          .send(await resize(buffer, width, height));
-      case 'fit':
-        return res
-          .type(mimeType)
-          .set({ 'Cache-Control': `max-age=${ONE_YEAR}` })
-          .send(await fit(buffer, width, height));
-      case 'identify':
-        return res.set({ 'Cache-Control': `max-age=${ONE_YEAR}` }).send(await identify(buffer));
-      default:
-        throw new Error('Unknown action');
-    }
+    return res
+      .type(imageAction.mimeType)
+      .set({ 'Cache-Control': `max-age=${imageAction.maxAgeForResponse}` })
+      .send(imageBuffer);
   });
-
-function _isUrlWhitelisted(url, whitelistType, defaultValue, whitelist) {
-  if (arguments.length != 4) throw new Error('params are not optional!');
-
-  if (whitelist && whitelist.hasOwnProperty(whitelistType)) {
-    const requestedHost = URL.parse(url).host;
-    const matches = whitelist[whitelistType].map(allowedHost => {
-      allowedHost = allowedHost instanceof RegExp ? allowedHost : new RegExp(allowedHost);
-      return !!requestedHost.match(allowedHost);
-    });
-
-    return matches.indexOf(true) > -1;
-  } else {
-    return defaultValue;
-  }
-}
-
-function isImageSourceHostAllowed(url, whitelist) {
-  return _isUrlWhitelisted(url, 'allowedHosts', true, whitelist);
-}

src/image/action/abstract/index.ts

@@ -0,0 +1,59 @@
+import { NextFunction, Request, Response } from 'express'
+import URL from 'url'
+
+export default abstract class ImageAction {
+
+  readonly SUPPORTED_ACTIONS = ['fit', 'resize', 'identify']
+  readonly SUPPORTED_MIMETYPES
+
+  req: Request
+  res: Response
+  next: NextFunction
+  options
+  mimeType: string
+
+  constructor(req: Request, res: Response, next: NextFunction, options) {
+    this.req = req
+    this.res = res
+    this.next = next
+    this.options = options
+  }
+
+  abstract getOption(): void
+
+  abstract validateOptions(): void
+
+  abstract getImageURL(): string
+
+  abstract get whitelistDomain(): string[]
+
+  abstract validateMIMEType(): void
+
+  abstract prossesImage(): void
+
+  isImageSourceHostAllowed() {
+    if (!this._isUrlWhitelisted(this.getImageURL(), 'allowedHosts', true, this.whitelistDomain)) {
+      return this.res.status(400).send({
+        code: 400,
+        result: `Host is not allowed`
+      })
+    }
+  }
+
+
+  _isUrlWhitelisted(url, whitelistType, defaultValue, whitelist) {
+    if (arguments.length != 4) throw new Error('params are not optional!')
+
+    if (whitelist && whitelist.hasOwnProperty(whitelistType)) {
+      const requestedHost = URL.parse(url).host
+
+      const matches = whitelist[whitelistType].map(allowedHost => {
+        allowedHost = allowedHost instanceof RegExp ? allowedHost : new RegExp(allowedHost)
+        return !!requestedHost.match(allowedHost)
+      })
+      return matches.indexOf(true) > -1
+    } else {
+      return defaultValue
+    }
+  }
+}

src/image/action/factory.ts

@@ -0,0 +1,35 @@
+'use strict';
+
+import { NextFunction, Request, Response } from 'express'
+import { IConfig } from "config";
+
+export default class ActionFactory {
+
+  request: Request
+  next: NextFunction
+  response: Response
+  config: IConfig
+
+  constructor(req: Request, res, next, app_config) {
+    this.request = req
+    this.response = res
+    this.next = next
+    this.config = app_config;
+  }
+
+  getAdapter(type: String): any {
+    let adapter_class = require(`./${type}`).default
+    if (!adapter_class) {
+      throw new Error(`Invalid adapter ${type}`);
+    } else {
+      let adapter_instance = new adapter_class(this.request, this.response, this.next, this.config);
+      if((typeof adapter_instance.isValidFor == 'function') && !adapter_instance.isValidFor(type))
+        throw new Error(`Not valid adapter class or adapter is not valid for ${type}`);
+      return adapter_instance;
+    }
+  }
+}
+
+export {
+  ActionFactory
+};

src/image/action/local/index.ts

@@ -0,0 +1,112 @@
+import ImageAction from '../abstract'
+import mime from 'mime-types'
+import { downloadImage, fit, identify, resize } from '../../../lib/image'
+
+export default class LocalImageAction extends ImageAction {
+
+  imageOptions
+  SUPPORTED_MIMETYPES = ['image/gif', 'image/png', 'image/jpeg', 'image/webp', 'image/svg+xml']
+  imageBuffer: Buffer
+
+  get whitelistDomain(): string[] {
+    return this.options.imageable.whitelist
+  }
+
+  get maxAgeForResponse() {
+    return 31557600000
+  }
+
+  getImageURL(): string {
+    return this.imageOptions.imgUrl
+  }
+
+  getOption() {
+    let imgUrl: string
+    let width: number
+    let height: number
+    let action: string
+    if (this.req.query.url) { // url provided as the query param
+      imgUrl = decodeURIComponent(this.req.query.url)
+      width = parseInt(this.req.query.width)
+      height = parseInt(this.req.query.height)
+      action = this.req.query.action
+    } else {
+      let urlParts = this.req.url.split('/')
+      width = parseInt(urlParts[1])
+      height = parseInt(urlParts[2])
+      action = urlParts[3]
+      imgUrl = `${this.options[this.options.platform].imgUrl}/${urlParts.slice(4).join('/')}` // full original image url
+      if (urlParts.length < 5) {
+        this.res.status(400).send({
+          code: 400,
+          result: 'Please provide following parameters: /img/<type>/<width>/<height>/<action:fit,resize,identify>/<relative_url>'
+        })
+        this.next()
+      }
+    }
+
+    this.imageOptions = {
+      imgUrl,
+      width,
+      height,
+      action
+    }
+  }
+
+  validateOptions() {
+    const { width, height, action } = this.imageOptions
+    if (isNaN(width) || isNaN(height) || !this.SUPPORTED_ACTIONS.includes(action)) {
+      return this.res.status(400).send({
+        code: 400,
+        result: 'Please provide following parameters: /img/<type>/<width>/<height>/<action:fit,resize,identify>/<relative_url> OR ?url=&width=&height=&action='
+      })
+    }
+
+    if (width > this.options.imageable.imageSizeLimit || width < 0 || height > this.options.imageable.imageSizeLimit || height < 0) {
+      return this.res.status(400).send({
+        code: 400,
+        result: `Width and height must have a value between 0 and ${this.options.imageable.imageSizeLimit}`
+      })
+    }
+  }
+
+  validateMIMEType() {
+    const mimeType = mime.lookup(this.imageOptions.imgUrl)
+
+    if (mimeType === false || !this.SUPPORTED_MIMETYPES.includes(mimeType)) {
+      return this.res.status(400).send({
+        code: 400,
+        result: 'Unsupported file type'
+      })
+    }
+
+    this.mimeType = mimeType
+  }
+
+  async prossesImage() {
+    const { imgUrl } = this.imageOptions
+
+    try {
+      this.imageBuffer = await downloadImage(imgUrl)
+    } catch (err) {
+      return this.res.status(400).send({
+        code: 400,
+        result: `Unable to download the requested image ${imgUrl}`
+      })
+    }
+    const { action, width, height } = this.imageOptions
+    switch (action) {
+      case 'resize':
+        this.imageBuffer = await resize(this.imageBuffer, width, height)
+        break
+      case 'fit':
+        this.imageBuffer = await fit(this.imageBuffer, width, height)
+        break
+      case 'identify':
+        this.imageBuffer = await identify(this.imageBuffer)
+        break
+      default:
+        throw new Error('Unknown action')
+    }
+  }
+}