[WIP] Fisheye for GIF

src/modules/FisheyeGl/Module.js

@@ -1,63 +1,77 @@
 /*
 * Resolves Fisheye Effect
 */
+const _ = require('lodash');
 module.exports = function DoNothing(options, UI) {
 
   var output;
+  getPixels = require('get-pixels');
+  gl = require('fisheyegl');
+
 
-  var gl = require('fisheyegl');
+  function draw(input, callback,progressObj) {
 
-  function draw(input, callback) {
+    progressObj.stop(true);
+    progressObj.overrideFlag = true;
 
     var step = this;
-
-    if (!options.inBrowser) {
-      require('../_nomodule/gl-context')(input, callback, step, options);
+    var curr = 0;
+    var isGif = input.src.includes('image/gif');
+    function changePixel(r, g, b, a) {
+      return [r, g, b, a];
     }
-    else {
-      // Create a canvas, if it doesn't already exist.
-      if (!document.querySelector('#image-sequencer-canvas')) {
+
+
+    function extraManipulation(pixels, setRenderState, generateOutput,datauri) {
+      curr++;
+      const oldPixels = _.cloneDeep(pixels);
+      setRenderState(false); // Prevent rendering of final output image until extraManipulation completes.
+      var canvas2 = document.createElement('canvas');
+      canvas2.width = oldPixels.shape[0]; //img.width();
+      canvas2.height = oldPixels.shape[1]; //img.height();
+      var ctx2 = canvas2.getContext('2d');
+
+      ctx2.putImageData(new ImageData(new Uint8ClampedArray(pixels.data), pixels.shape[0], pixels.shape[1]), 0, 0);
+      var url1 = datauri;
+
+      if (!options.inBrowser) {
+        require('../_nomodule/gl-context')(input, callback, step, options);
+      }
+      else {
+
         var canvas = document.createElement('canvas');
         canvas.style.display = 'none';
-        canvas.setAttribute('id', 'image-sequencer-canvas');
+        canvas.setAttribute('id', 'image-sequencer-canvas'+curr.toString());
         document.body.append(canvas);
+
+        var distorter = new FisheyeGl({
+            selector: '#image-sequencer-canvas'+curr.toString()
+        });
       }
-      else var canvas = document.querySelector('#image-sequencer-canvas');
-
-      distorter = FisheyeGl({
-        selector: '#image-sequencer-canvas'
-      });
-
-      // Parse the inputs
-      options.a = parseFloat(options.a) || distorter.lens.a;
-      options.b = parseFloat(options.b) || distorter.lens.b;
-      options.Fx = parseFloat(options.Fx) || distorter.lens.Fx;
-      options.Fy = parseFloat(options.Fy) || distorter.lens.Fy;
-      options.scale = parseFloat(options.scale) || distorter.lens.scale;
-      options.x = parseFloat(options.x) || distorter.fov.x;
-      options.y = parseFloat(options.y) || distorter.fov.y;
-
-      // Set fisheyegl inputs
-      distorter.lens.a = options.a;
-      distorter.lens.b = options.b;
-      distorter.lens.Fx = options.Fx;
-      distorter.lens.Fy = options.Fy;
-      distorter.lens.scale = options.scale;
-      distorter.fov.x = options.x;
-      distorter.fov.y = options.y;
-
-      // generate fisheyegl output
-      distorter.setImage(input.src, function() {
-
-        // this output is accessible to Image Sequencer
-        step.output = { src: canvas.toDataURL(), format: input.format };
-
-        // Tell Image Sequencer and UI that step has been drawn
-        callback();
-
+
+      require('./fisheye')(options, pixels, oldPixels,url1,distorter,isGif, () => {
+
+        setRenderState(true); // Allow rendering in the callback.
+        generateOutput();
+
       });
+    }
 
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
     }
+
+    return require('../_nomodule/PixelManipulation.js')(input, {
+      output: output,
+      ui: options.step.ui,
+      changePixel: changePixel,
+      extraManipulation: extraManipulation,
+      format: input.format,
+      image: options.image,
+      inBrowser: options.inBrowser,
+      callback: callback,
+      useWasm:options.useWasm
+    });
   }
 
   return {

src/modules/FisheyeGl/fisheye.js

@@ -0,0 +1,48 @@
+const pixelSetter = require('../../util/pixelSetter.js'),
+  getPixels = require('get-pixels');
+
+module.exports = exports = function (options, pixels, oldPixels, url1,distorter, isGif,cb) {
+        // Parse the inputs
+        options.a = parseFloat(options.a) || distorter.lens.a;
+        options.b = parseFloat(options.b) || distorter.lens.b;
+        options.Fx = parseFloat(options.Fx) || distorter.lens.Fx;
+        options.Fy = parseFloat(options.Fy) || distorter.lens.Fy;
+        options.scale = parseFloat(options.scale) || distorter.lens.scale;
+        options.x = parseFloat(options.x) || distorter.fov.x;
+        options.y = parseFloat(options.y) || distorter.fov.y;
+
+        // Set fisheyegl inputs
+        distorter.lens.a = options.a;
+        distorter.lens.b = options.b;
+        distorter.lens.Fx = options.Fx;
+        distorter.lens.Fy = options.Fy;
+        distorter.lens.scale = options.scale;
+        distorter.fov.x = options.x;
+        distorter.fov.y = options.y;
+
+        distorter.setImage(url1, function() {
+            getPixels(distorter.getImage().src, function (err, distorted) {
+
+                for (let x = 0; x < oldPixels.shape[0]; x++) {
+                    for (let y = 0; y < oldPixels.shape[1]; y++) {
+
+
+                        pixelSetter(
+                            x,
+                            y,
+                            [
+                            distorted.get(x, y, 0),
+                            distorted.get(x, y, 1),
+                            distorted.get(x, y, 2),
+                            distorted.get(x, y, 3)
+                            ],
+                            pixels
+                        );
+
+                    }
+                }
+
+            if(cb) cb();
+        });
+    });
+};

src/modules/_nomodule/PixelManipulation.js

@@ -314,8 +314,10 @@ module.exports = function PixelManipulation(image, options) {
       else resolvedFrames++;
 
       if (options.extraManipulation){
-        frames[f] = options.extraManipulation(framePix, setRenderState, generateOutput) || framePix; // extraManipulation is used to manipulate each pixel individually.
-        perFrameShape = frames[f].shape;
+        getDataUri(frames[f], options.format).then(datauri => {
+          frames[f] = options.extraManipulation(framePix, setRenderState, generateOutput,datauri) || framePix; // extraManipulation is used to manipulate each pixel individually.
+          perFrameShape = frames[f].shape;
+        });
       }
       generateOutput();
     }