Add minify-image module (#1149)

* Add minify-image module

* Add node modules

* corrected path

* Add browser func

* Add test and documentation

docs/MODULES.md

@@ -39,6 +39,7 @@ List of Module Documentations
 34. [Tint](#tint)
 35. [ColorTemperature](#color-temperature)
 36. [Grid-Overlay](#grid-overlay)
+37. [MinifyImage](#minify-image)
 
 
 ## crop-module
@@ -600,4 +601,18 @@ This adds the grid over an image.
 where `options` is an object with the following property:
 * options.x : The value at which the grid line should start in x-axis.
 * options.y : The value at which the grid line should start in y-axis.
-* color : Color for the grid on the image.
+* color : Color for the grid on the image.
+
+# Minify Image
+
+This module minifies the image using lossy compression that is the image-dimensions are not lost but the size is reduced.
+
+The module supports jpg/jpeg/webp images in browser; but the node version supports all of the types.
+
+## Usage
+
+```js
+sequencer.loadImage('PATH')
+           .addSteps('minify-image')
+           .run()
+```

package.json

@@ -30,11 +30,13 @@
     "url": "https://github.com/publiclab/image-sequencer/issues"
   },
   "dependencies": {
+    "atob": "^2.1.2",
     "base64-img": "^1.0.4",
     "bootstrap": "~3.4.0",
     "bootstrap-colorpicker": "^2.5.3",
     "buffer": "~5.2.1",
     "commander": "^2.11.0",
+    "compressorjs": "^1.0.5",
     "data-uri-to-buffer": "^2.0.0",
     "downloadjs": "^1.4.7",
     "eslint": "^5.16.0",
@@ -47,6 +49,9 @@
     "gpu.js": "^2.0.0-rc.12",
     "image-sequencer-invert": "^1.0.0",
     "imagejs": "0.0.9",
+    "imagemin": "^7.0.0",
+    "imagemin-jpegtran": "^6.0.0",
+    "imagemin-pngquant": "^8.0.0",
     "imgareaselect": "git://github.com/jywarren/imgareaselect.git#v1.0.0-rc.2",
     "istanbul": "^0.4.5",
     "jasmine": "^3.4.0",
@@ -62,6 +67,7 @@
     "readline-sync": "^1.4.7",
     "save-pixels": "~2.3.4",
     "selectize": "^0.12.6",
+    "spawn-sync": "^2.0.0",
     "urify": "^2.1.1",
     "webgl-distort": "0.0.2"
   },

src/Modules.js

@@ -28,6 +28,7 @@ module.exports = {
   'gradient': require('./modules/Gradient'),
   'grid-overlay': require('./modules/GridOverlay'),
   'import-image': require('./modules/ImportImage'),
+  'minify-image': require('./modules/MinifyImage'),
   'invert': require('image-sequencer-invert'),
   'ndvi': require('./modules/Ndvi'),
   'ndvi-colormap': require('./modules/NdviColormap'),

src/modules/MinifyImage/Module.js

@@ -0,0 +1,102 @@
+module.exports = function MinifyImage(options, UI) {
+  var output;
+  if (!options.inBrowser) {
+    base64Img = require('base64-img');
+    imagemin = require('imagemin');
+    imageminJpegtran = require('imagemin-jpegtran');
+    imageminPngquant = require('imagemin-pngquant');
+  }
+
+  function draw(input, callback, progressObj) {
+    progressObj.stop(true);
+    progressObj.overrideFlag = true;
+
+    var step = this;
+
+    function dataURItoBlob(dataURI) {
+      // convert base64 to raw binary data held in a string
+      // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
+      var byteString = atob(dataURI.split(',')[1]);
+
+      // separate out the mime component
+      var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+
+      // write the bytes of the string to an ArrayBuffer
+      var ab = new ArrayBuffer(byteString.length);
+
+      // create a view into the buffer
+      var ia = new Uint8Array(ab);
+
+      // set the bytes of the buffer to the correct values
+      for (var i = 0; i < byteString.length; i++) {
+        ia[i] = byteString.charCodeAt(i);
+      }
+
+      // write the ArrayBuffer to a blob, and you're done
+      var blob = new Blob([ab], {
+        type: mimeString
+      });
+      return blob;
+
+    }
+    if (options.inBrowser) {
+      var Compressor = require('compressorjs');
+      var blob = dataURItoBlob(input.src);
+      new Compressor(blob, {
+        quality: options.quality || 0.5,
+        success(result) {
+          var reader = new FileReader();
+          reader.readAsDataURL(result);
+          reader.onloadend = function () {
+            base64data = reader.result;
+            output(base64data, input.format);
+            if (callback) callback();
+            return;
+          };
+          
+        },
+        error(err) {
+          console.log(err.message);
+        },
+      });
+
+    }
+    else{
+      let filePath = __dirname + '/images/';
+      var returnPath = base64Img.imgSync(input.src, filePath, 'test');
+      (async () => {
+        const files = await imagemin([returnPath], {
+          destination: __dirname + '/results/',
+          plugins: [
+            imageminJpegtran(),
+            imageminPngquant({
+              quality: [0.6, 0.8]
+            })
+          ]
+        });
+        var destPath = __dirname + '/results/test.' + input.format;
+        var data = base64Img.base64Sync(destPath);
+        output(data, input.format);
+        if (callback) callback();
+      })();
+    }
+
+
+    function output(datauri, mimetype) {
+
+      // This output is accessible by Image Sequencer
+      step.output = {
+        src: datauri,
+        format: mimetype
+      };
+    }
+  }
+  return {
+    options: options,
+    draw: draw,
+    output: output,
+    UI: UI
+  };
+};
+
+

src/modules/MinifyImage/index.js

@@ -0,0 +1,4 @@
+module.exports = [
+  require('./Module'),
+  require('./info.json')
+];

src/modules/MinifyImage/info.json

@@ -0,0 +1,14 @@
+{
+    "name": "minify-image",
+    "description": "Minifies the given image (Works for jpg/jpeg/webp images in browser)",
+    "url": "https://github.com/publiclab/image-sequencer/tree/master/MODULES.md",
+    "inputs": { 
+      "quality":{
+        "type": "float",
+          "desc": "quality aspect of the given image",
+          "default": "0.5"
+      }
+    },
+    "docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md#add-qr-module"
+  }
+  

test/core/modules/minify-image.js

@@ -0,0 +1,32 @@
+const dataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEX+AAD///+KQee0AAAAAWJLR0QB/wIt3gAAAAd0SU1FB+EGHRIVAvrm6EMAAAAMSURBVAjXY2AgDQAAADAAAceqhY4AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTctMDYtMjlUMTg6MjE6MDIrMDI6MDDGD83DAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE3LTA2LTI5VDE4OjIxOjAyKzAyOjAwt1J1fwAAAABJRU5ErkJggg==';
+console.log(dataURI);
+const ImageSequencer = require('../../../src/ImageSequencer');
+const test = require('tape');
+var atob = require('atob');
+
+var sequencer = ImageSequencer();
+var base64str = dataURI.substr(22);
+var decoded = atob(base64str);
+
+
+var initialSize = decoded.length;
+
+
+sequencer.loadImage(dataURI, function(){
+  this.addSteps('minify-image');
+});
+
+
+test('minify-image minifies the image', t => {
+  sequencer.run(function callback(out){
+    console.log(out);
+    var base64str = out.substr(22);
+    var decoded = atob(base64str);
+    var miniifiedSize = decoded.length;
+    var isLess = miniifiedSize < initialSize;
+    t.equal(isLess, true, 'image minified');
+    t.end();
+  });
+});
+
+