diff --git a/src/modules/FisheyeGl/Module.js b/src/modules/FisheyeGl/Module.js index 8c5b6e5c39..37153c4a6f 100644 --- a/src/modules/FisheyeGl/Module.js +++ b/src/modules/FisheyeGl/Module.js @@ -1,63 +1,72 @@ /* * 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) { + curr++; + const oldPixels = _.cloneDeep(pixels); + const getDataUri = require('../../util/getDataUri'); + setRenderState(false); // Prevent rendering of final output image until extraManipulation completes. + + 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(); - + getDataUri(pixels, input.format).then(dataUrl => { + require('./fisheye')(options, pixels, oldPixels, dataUrl, distorter, () => { + + 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 { diff --git a/src/modules/FisheyeGl/fisheye.js b/src/modules/FisheyeGl/fisheye.js new file mode 100644 index 0000000000..7d83c9bebd --- /dev/null +++ b/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, 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(); + }); + }); +}; \ No newline at end of file