Implemented basic image processing/caching factories

With this we get a local action witch is the current behavior.
Then we have file caching which is disabled by default. This creates
and md5 of the URL and for that he saves the processed image to file.

Author: ResuBaka

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')
+    }
+  }
+}