From 92e4008c53547d43aadca8e371a4938fd37f120b Mon Sep 17 00:00:00 2001 From: ataata107 Date: Tue, 14 Jan 2020 03:01:11 +0530 Subject: [PATCH 1/7] WIP Fisheye for GIF --- src/modules/FisheyeGl/Module.js | 102 ++++++++++++++++++++------------ 1 file changed, 63 insertions(+), 39 deletions(-) diff --git a/src/modules/FisheyeGl/Module.js b/src/modules/FisheyeGl/Module.js index 8c5b6e5c39..6a49feb513 100644 --- a/src/modules/FisheyeGl/Module.js +++ b/src/modules/FisheyeGl/Module.js @@ -11,53 +11,77 @@ module.exports = function DoNothing(options, UI) { var step = this; - if (!options.inBrowser) { - require('../_nomodule/gl-context')(input, callback, step, options); - } - else { - // Create a canvas, if it doesn't already exist. - if (!document.querySelector('#image-sequencer-canvas')) { - var canvas = document.createElement('canvas'); - canvas.style.display = 'none'; - canvas.setAttribute('id', 'image-sequencer-canvas'); - document.body.append(canvas); + + function extraManipulation(pixels) { + if (!options.inBrowser) { + require('../_nomodule/gl-context')(input, callback, step, options); } - 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; + else { + // Create a canvas, if it doesn't already exist. + if (!document.querySelector('#image-sequencer-canvas')) { + var canvas = document.createElement('canvas'); + canvas.style.display = 'none'; + canvas.setAttribute('id', 'image-sequencer-canvas'); + document.body.append(canvas); + } + else var canvas = document.querySelector('#image-sequencer-canvas'); - // 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; + var distorter = FisheyeGl({ + selector: '#image-sequencer-canvas' + }); - // generate fisheyegl output - distorter.setImage(input.src, function() { + // 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; - // 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(); + // 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; + } + + var canvas2 = document.createElement('canvas'); + canvas2.width = pixels.shape[0]; //img.width(); + canvas2.height = pixels.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 = canvas2.toDataURL(); + + + distorter.setImage(url1, function() { + + var ctx= canvas.getContext('2d'); + var myImageData = ctx.getImageData(0, 0, canvas.width, canvas.height); + pixels.data = new Uint8Array(myImageData.data); + + return pixels; }); + } + 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, + extraManipulation: extraManipulation, + format: input.format, + image: options.image, + inBrowser: options.inBrowser, + callback: callback, + useWasm:options.useWasm + }); } return { From f8486f6862a6d579bdf58d2cdb10ab40e818df8e Mon Sep 17 00:00:00 2001 From: ataata107 Date: Fri, 17 Jan 2020 03:29:40 +0530 Subject: [PATCH 2/7] added callback --- src/modules/FisheyeGl/Module.js | 108 +++++++++++++++++-------------- src/modules/FisheyeGl/fisheye.js | 44 +++++++++++++ 2 files changed, 105 insertions(+), 47 deletions(-) create mode 100644 src/modules/FisheyeGl/fisheye.js diff --git a/src/modules/FisheyeGl/Module.js b/src/modules/FisheyeGl/Module.js index 6a49feb513..98740e6bb9 100644 --- a/src/modules/FisheyeGl/Module.js +++ b/src/modules/FisheyeGl/Module.js @@ -1,70 +1,83 @@ /* * 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; + function changePixel(r, g, b, a) { + return [r, g, b, a]; + } + - function extraManipulation(pixels) { + function extraManipulation(pixels, setRenderState, generateOutput) { + 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 = canvas2.toDataURL(); + if (!options.inBrowser) { require('../_nomodule/gl-context')(input, callback, step, options); } else { - // Create a canvas, if it doesn't already exist. - if (!document.querySelector('#image-sequencer-canvas')) { - var canvas = document.createElement('canvas'); - canvas.style.display = 'none'; - canvas.setAttribute('id', 'image-sequencer-canvas'); - document.body.append(canvas); - } - else var canvas = document.querySelector('#image-sequencer-canvas'); + // Create a canvas, if it doesn't already exist. + // if (!document.querySelector('#image-sequencer-canvas')) { + // alert("yo") + var canvas = document.createElement('canvas'); + canvas.style.display = 'none'; + canvas.setAttribute('id', 'image-sequencer-canvas'); + document.body.append(canvas); + // } + // else var canvas = document.querySelector('#image-sequencer-canvas'); - var distorter = FisheyeGl({ - selector: '#image-sequencer-canvas' - }); + var distorter = FisheyeGl({ + selector: '#image-sequencer-canvas' + }); + var link = document.createElement('a'); + link.download = "my-image.png"; + link.href = canvas.toDataURL(); + link.click(); - // 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; + // 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; + // 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; } - - var canvas2 = document.createElement('canvas'); - canvas2.width = pixels.shape[0]; //img.width(); - canvas2.height = pixels.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 = canvas2.toDataURL(); - - - distorter.setImage(url1, function() { - - var ctx= canvas.getContext('2d'); - var myImageData = ctx.getImageData(0, 0, canvas.width, canvas.height); - pixels.data = new Uint8Array(myImageData.data); - - return pixels; + // alert("po") + require('./fisheye')(options, pixels, oldPixels,url1,distorter, () => { + // document.getElementById('image-sequencer-canvas').remove(); + setRenderState(true); // Allow rendering in the callback. + generateOutput(); + // return pixels }); } @@ -75,6 +88,7 @@ module.exports = function DoNothing(options, UI) { return require('../_nomodule/PixelManipulation.js')(input, { output: output, ui: options.step.ui, + changePixel: changePixel, extraManipulation: extraManipulation, format: input.format, image: options.image, diff --git a/src/modules/FisheyeGl/fisheye.js b/src/modules/FisheyeGl/fisheye.js new file mode 100644 index 0000000000..95607aad29 --- /dev/null +++ b/src/modules/FisheyeGl/fisheye.js @@ -0,0 +1,44 @@ +const pixelSetter = require('../../util/pixelSetter.js'), + getPixels = require('get-pixels'); + +module.exports = exports = function (options, pixels, oldPixels, url1,distorter, cb) { + + // var link = document.createElement('a'); + // link.download = "my-image.png"; + // link.href = url1; + // link.click(); + // alert(distorter.lens.a) + + + + distorter.setImage(url1, function() { + document.getElementById('image-sequencer-canvas').remove(); + getPixels(distorter.getImage('image/png').src, function (err, qrPixels) { + // alert(distorter.getImage().src) + // var link = document.createElement('a'); + // link.download = "my-image.png"; + // link.href = url1; + // link.click(); + // var ctx= canvas.getContext('2d'); + // var myImageData = ctx.getImageData(0, 0, canvas.width, canvas.height); + // pixels.data = new Uint8Array(myImageData.data); + for (let x = 0; x < oldPixels.shape[0]; x++) { + for (let y = 0; y < oldPixels.shape[1]; y++) { + pixelSetter( + x, + y, + [ + qrPixels.get(x, y, 0), + qrPixels.get(x, y, 1), + qrPixels.get(x, y, 2), + qrPixels.get(x, y, 3) + ], + pixels + ); + } + } + + if(cb) cb(); + }); + }); +}; \ No newline at end of file From 4f67bc52a000a05d5cb9a2f1c048ea49e264d344 Mon Sep 17 00:00:00 2001 From: ataata107 Date: Fri, 17 Jan 2020 04:26:23 +0530 Subject: [PATCH 3/7] added multiple canvases --- src/modules/FisheyeGl/Module.js | 17 +++++++++-------- src/modules/FisheyeGl/fisheye.js | 2 +- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/modules/FisheyeGl/Module.js b/src/modules/FisheyeGl/Module.js index 98740e6bb9..42f8d08c6c 100644 --- a/src/modules/FisheyeGl/Module.js +++ b/src/modules/FisheyeGl/Module.js @@ -15,13 +15,14 @@ module.exports = function DoNothing(options, UI) { progressObj.overrideFlag = true; var step = this; - + var curr = 0; function changePixel(r, g, b, a) { return [r, g, b, a]; } function extraManipulation(pixels, setRenderState, generateOutput) { + curr++; const oldPixels = _.cloneDeep(pixels); setRenderState(false); // Prevent rendering of final output image until extraManipulation completes. var canvas2 = document.createElement('canvas'); @@ -41,18 +42,18 @@ module.exports = function DoNothing(options, UI) { // alert("yo") 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); // } // else var canvas = document.querySelector('#image-sequencer-canvas'); - var distorter = FisheyeGl({ - selector: '#image-sequencer-canvas' + var distorter = new FisheyeGl({ + selector: '#image-sequencer-canvas'+curr.toString() }); - var link = document.createElement('a'); - link.download = "my-image.png"; - link.href = canvas.toDataURL(); - link.click(); + // var link = document.createElement('a'); + // link.download = "my-image.png"; + // link.href = canvas.toDataURL(); + // link.click(); // Parse the inputs options.a = parseFloat(options.a) || distorter.lens.a; diff --git a/src/modules/FisheyeGl/fisheye.js b/src/modules/FisheyeGl/fisheye.js index 95607aad29..b3d06e0371 100644 --- a/src/modules/FisheyeGl/fisheye.js +++ b/src/modules/FisheyeGl/fisheye.js @@ -12,7 +12,7 @@ module.exports = exports = function (options, pixels, oldPixels, url1,distorter, distorter.setImage(url1, function() { - document.getElementById('image-sequencer-canvas').remove(); + // document.getElementById('image-sequencer-canvas').remove(); getPixels(distorter.getImage('image/png').src, function (err, qrPixels) { // alert(distorter.getImage().src) // var link = document.createElement('a'); From 91db859cf11a362eb15a999f591724d53e556fd7 Mon Sep 17 00:00:00 2001 From: ataata107 Date: Fri, 17 Jan 2020 15:34:17 +0530 Subject: [PATCH 4/7] Added transpose for gif --- src/modules/FisheyeGl/Module.js | 30 +++++++---------- src/modules/FisheyeGl/fisheye.js | 58 ++++++++++++++++---------------- 2 files changed, 41 insertions(+), 47 deletions(-) diff --git a/src/modules/FisheyeGl/Module.js b/src/modules/FisheyeGl/Module.js index 42f8d08c6c..299fc561ff 100644 --- a/src/modules/FisheyeGl/Module.js +++ b/src/modules/FisheyeGl/Module.js @@ -16,6 +16,7 @@ module.exports = function DoNothing(options, UI) { var step = this; var curr = 0; + var isGif = input.src.includes('image/gif'); function changePixel(r, g, b, a) { return [r, g, b, a]; } @@ -37,23 +38,16 @@ module.exports = function DoNothing(options, UI) { require('../_nomodule/gl-context')(input, callback, step, options); } else { - // Create a canvas, if it doesn't already exist. - // if (!document.querySelector('#image-sequencer-canvas')) { - // alert("yo") - var canvas = document.createElement('canvas'); - canvas.style.display = 'none'; - canvas.setAttribute('id', 'image-sequencer-canvas'+curr.toString()); - document.body.append(canvas); - // } - // else var canvas = document.querySelector('#image-sequencer-canvas'); - + + var canvas = document.createElement('canvas'); + canvas.style.display = 'none'; + canvas.setAttribute('id', 'image-sequencer-canvas'+curr.toString()); + document.body.append(canvas); + var distorter = new FisheyeGl({ selector: '#image-sequencer-canvas'+curr.toString() }); - // var link = document.createElement('a'); - // link.download = "my-image.png"; - // link.href = canvas.toDataURL(); - // link.click(); + // Parse the inputs options.a = parseFloat(options.a) || distorter.lens.a; @@ -73,12 +67,12 @@ module.exports = function DoNothing(options, UI) { distorter.fov.x = options.x; distorter.fov.y = options.y; } - // alert("po") - require('./fisheye')(options, pixels, oldPixels,url1,distorter, () => { - // document.getElementById('image-sequencer-canvas').remove(); + + require('./fisheye')(options, pixels, oldPixels,url1,distorter,isGif, () => { + setRenderState(true); // Allow rendering in the callback. generateOutput(); - // return pixels + }); } diff --git a/src/modules/FisheyeGl/fisheye.js b/src/modules/FisheyeGl/fisheye.js index b3d06e0371..b428c43f00 100644 --- a/src/modules/FisheyeGl/fisheye.js +++ b/src/modules/FisheyeGl/fisheye.js @@ -1,40 +1,40 @@ const pixelSetter = require('../../util/pixelSetter.js'), getPixels = require('get-pixels'); -module.exports = exports = function (options, pixels, oldPixels, url1,distorter, cb) { - - // var link = document.createElement('a'); - // link.download = "my-image.png"; - // link.href = url1; - // link.click(); - // alert(distorter.lens.a) - +module.exports = exports = function (options, pixels, oldPixels, url1,distorter, isGif,cb) { distorter.setImage(url1, function() { - // document.getElementById('image-sequencer-canvas').remove(); - getPixels(distorter.getImage('image/png').src, function (err, qrPixels) { - // alert(distorter.getImage().src) - // var link = document.createElement('a'); - // link.download = "my-image.png"; - // link.href = url1; - // link.click(); - // var ctx= canvas.getContext('2d'); - // var myImageData = ctx.getImageData(0, 0, canvas.width, canvas.height); - // pixels.data = new Uint8Array(myImageData.data); + getPixels(distorter.getImage().src, function (err, qrPixels) { + var ctx= canvas.getContext('2d'); for (let x = 0; x < oldPixels.shape[0]; x++) { for (let y = 0; y < oldPixels.shape[1]; y++) { - pixelSetter( - x, - y, - [ - qrPixels.get(x, y, 0), - qrPixels.get(x, y, 1), - qrPixels.get(x, y, 2), - qrPixels.get(x, y, 3) - ], - pixels - ); + if(isGif){ //In case of GIF we get a transposed image + pixelSetter( + x, + y, + [ + qrPixels.get(y, x, 0), + qrPixels.get(y, x, 1), + qrPixels.get(y, x, 2), + qrPixels.get(y, x, 3) + ], + pixels + ); + } + else{ + pixelSetter( + x, + y, + [ + qrPixels.get(x, y, 0), + qrPixels.get(x, y, 1), + qrPixels.get(x, y, 2), + qrPixels.get(x, y, 3) + ], + pixels + ); + } } } From 169190d2f64824c049e272ed759a359e8bbdec72 Mon Sep 17 00:00:00 2001 From: ataata107 Date: Fri, 17 Jan 2020 16:00:12 +0530 Subject: [PATCH 5/7] Refactored --- src/modules/FisheyeGl/Module.js | 33 +++----------- src/modules/FisheyeGl/fisheye.js | 78 +++++++++++++++++++------------- 2 files changed, 54 insertions(+), 57 deletions(-) diff --git a/src/modules/FisheyeGl/Module.js b/src/modules/FisheyeGl/Module.js index 299fc561ff..9e6f2e5016 100644 --- a/src/modules/FisheyeGl/Module.js +++ b/src/modules/FisheyeGl/Module.js @@ -39,33 +39,14 @@ module.exports = function DoNothing(options, UI) { } else { - var canvas = document.createElement('canvas'); - canvas.style.display = 'none'; - canvas.setAttribute('id', 'image-sequencer-canvas'+curr.toString()); - document.body.append(canvas); - - var distorter = new FisheyeGl({ - selector: '#image-sequencer-canvas'+curr.toString() - }); + var canvas = document.createElement('canvas'); + canvas.style.display = 'none'; + canvas.setAttribute('id', 'image-sequencer-canvas'+curr.toString()); + document.body.append(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; + var distorter = new FisheyeGl({ + selector: '#image-sequencer-canvas'+curr.toString() + }); } require('./fisheye')(options, pixels, oldPixels,url1,distorter,isGif, () => { diff --git a/src/modules/FisheyeGl/fisheye.js b/src/modules/FisheyeGl/fisheye.js index b428c43f00..0d932774c1 100644 --- a/src/modules/FisheyeGl/fisheye.js +++ b/src/modules/FisheyeGl/fisheye.js @@ -2,41 +2,57 @@ 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, qrPixels) { - var ctx= canvas.getContext('2d'); - for (let x = 0; x < oldPixels.shape[0]; x++) { - for (let y = 0; y < oldPixels.shape[1]; y++) { - if(isGif){ //In case of GIF we get a transposed image - pixelSetter( - x, - y, - [ - qrPixels.get(y, x, 0), - qrPixels.get(y, x, 1), - qrPixels.get(y, x, 2), - qrPixels.get(y, x, 3) - ], - pixels - ); + 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++) { + if(isGif){ //In case of GIF we get a transposed image + pixelSetter( + x, + y, + [ + distorted.get(y, x, 0), + distorted.get(y, x, 1), + distorted.get(y, x, 2), + distorted.get(y, x, 3) + ], + pixels + ); + } + else{ + pixelSetter( + x, + y, + [ + distorted.get(x, y, 0), + distorted.get(x, y, 1), + distorted.get(x, y, 2), + distorted.get(x, y, 3) + ], + pixels + ); + } + } } - else{ - pixelSetter( - x, - y, - [ - qrPixels.get(x, y, 0), - qrPixels.get(x, y, 1), - qrPixels.get(x, y, 2), - qrPixels.get(x, y, 3) - ], - pixels - ); - } - } - } if(cb) cb(); }); From e862e4df52ea6d7f4f69950c6908ce1209741730 Mon Sep 17 00:00:00 2001 From: ataata107 Date: Fri, 17 Jan 2020 19:05:23 +0530 Subject: [PATCH 6/7] Manipulate using dataurl --- src/modules/FisheyeGl/Module.js | 4 ++-- src/modules/FisheyeGl/fisheye.js | 18 +++--------------- src/modules/_nomodule/PixelManipulation.js | 6 ++++-- 3 files changed, 9 insertions(+), 19 deletions(-) diff --git a/src/modules/FisheyeGl/Module.js b/src/modules/FisheyeGl/Module.js index 9e6f2e5016..5517d22f86 100644 --- a/src/modules/FisheyeGl/Module.js +++ b/src/modules/FisheyeGl/Module.js @@ -22,7 +22,7 @@ module.exports = function DoNothing(options, UI) { } - function extraManipulation(pixels, setRenderState, generateOutput) { + function extraManipulation(pixels, setRenderState, generateOutput,datauri) { curr++; const oldPixels = _.cloneDeep(pixels); setRenderState(false); // Prevent rendering of final output image until extraManipulation completes. @@ -32,7 +32,7 @@ module.exports = function DoNothing(options, UI) { var ctx2 = canvas2.getContext('2d'); ctx2.putImageData(new ImageData(new Uint8ClampedArray(pixels.data), pixels.shape[0], pixels.shape[1]), 0, 0); - var url1 = canvas2.toDataURL(); + var url1 = datauri; if (!options.inBrowser) { require('../_nomodule/gl-context')(input, callback, step, options); diff --git a/src/modules/FisheyeGl/fisheye.js b/src/modules/FisheyeGl/fisheye.js index 0d932774c1..046d9b1239 100644 --- a/src/modules/FisheyeGl/fisheye.js +++ b/src/modules/FisheyeGl/fisheye.js @@ -25,20 +25,8 @@ module.exports = exports = function (options, pixels, oldPixels, url1,distorter, for (let x = 0; x < oldPixels.shape[0]; x++) { for (let y = 0; y < oldPixels.shape[1]; y++) { - if(isGif){ //In case of GIF we get a transposed image - pixelSetter( - x, - y, - [ - distorted.get(y, x, 0), - distorted.get(y, x, 1), - distorted.get(y, x, 2), - distorted.get(y, x, 3) - ], - pixels - ); - } - else{ + + pixelSetter( x, y, @@ -50,7 +38,7 @@ module.exports = exports = function (options, pixels, oldPixels, url1,distorter, ], pixels ); - } + } } diff --git a/src/modules/_nomodule/PixelManipulation.js b/src/modules/_nomodule/PixelManipulation.js index 9731fe07f4..dd1669e6d3 100644 --- a/src/modules/_nomodule/PixelManipulation.js +++ b/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(); } From b7d132ce1708e2912cd45170e7133d0c89058b36 Mon Sep 17 00:00:00 2001 From: ataata107 Date: Wed, 22 Jan 2020 01:51:19 +0530 Subject: [PATCH 7/7] Added callback to fetch datauri --- src/modules/FisheyeGl/Module.js | 31 ++++------ src/modules/FisheyeGl/fisheye.js | 72 +++++++++++----------- src/modules/_nomodule/PixelManipulation.js | 6 +- 3 files changed, 51 insertions(+), 58 deletions(-) diff --git a/src/modules/FisheyeGl/Module.js b/src/modules/FisheyeGl/Module.js index 5517d22f86..37153c4a6f 100644 --- a/src/modules/FisheyeGl/Module.js +++ b/src/modules/FisheyeGl/Module.js @@ -9,7 +9,7 @@ module.exports = function DoNothing(options, UI) { gl = require('fisheyegl'); - function draw(input, callback,progressObj) { + function draw(input, callback, progressObj) { progressObj.stop(true); progressObj.overrideFlag = true; @@ -22,18 +22,12 @@ module.exports = function DoNothing(options, UI) { } - function extraManipulation(pixels, setRenderState, generateOutput,datauri) { + 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. - 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); } @@ -41,19 +35,20 @@ module.exports = function DoNothing(options, UI) { var canvas = document.createElement('canvas'); canvas.style.display = 'none'; - canvas.setAttribute('id', 'image-sequencer-canvas'+curr.toString()); + canvas.setAttribute('id', 'image-sequencer-canvas' + curr.toString()); document.body.append(canvas); var distorter = new FisheyeGl({ - selector: '#image-sequencer-canvas'+curr.toString() + selector: '#image-sequencer-canvas' + curr.toString() }); } - - require('./fisheye')(options, pixels, oldPixels,url1,distorter,isGif, () => { - - setRenderState(true); // Allow rendering in the callback. - generateOutput(); - + getDataUri(pixels, input.format).then(dataUrl => { + require('./fisheye')(options, pixels, oldPixels, dataUrl, distorter, () => { + + setRenderState(true); // Allow rendering in the callback. + generateOutput(); + + }); }); } diff --git a/src/modules/FisheyeGl/fisheye.js b/src/modules/FisheyeGl/fisheye.js index 046d9b1239..7d83c9bebd 100644 --- a/src/modules/FisheyeGl/fisheye.js +++ b/src/modules/FisheyeGl/fisheye.js @@ -1,48 +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; +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; + // 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) { + 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++) { + 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 - ); + 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(); - }); + if(cb) cb(); }); + }); }; \ No newline at end of file diff --git a/src/modules/_nomodule/PixelManipulation.js b/src/modules/_nomodule/PixelManipulation.js index 5a327c2374..0a5dfa21df 100644 --- a/src/modules/_nomodule/PixelManipulation.js +++ b/src/modules/_nomodule/PixelManipulation.js @@ -286,10 +286,8 @@ module.exports = function PixelManipulation(image, options) { else resolvedFrames++; if (options.extraManipulation){ - 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; - }); + frames[f] = options.extraManipulation(framePix, setRenderState, generateOutput) || framePix; // extraManipulation is used to manipulate each pixel individually. + perFrameShape = frames[f].shape; } generateOutput(); }