From 825b859b367acf273f2a3b40fc8964eb8d4b91f7 Mon Sep 17 00:00:00 2001 From: ataata107 Date: Tue, 4 Feb 2020 17:52:28 +0530 Subject: [PATCH 1/2] WIP Webgl for GIF's --- src/modules/WebglDistort/Module.js | 80 ++++++++++++++++++++---------- 1 file changed, 53 insertions(+), 27 deletions(-) diff --git a/src/modules/WebglDistort/Module.js b/src/modules/WebglDistort/Module.js index 686edeb4ee..d54ff9cd1c 100644 --- a/src/modules/WebglDistort/Module.js +++ b/src/modules/WebglDistort/Module.js @@ -190,35 +190,61 @@ module.exports = function DoNothing(options, UI) { var parseDistortCoordinates = require('../../util/parseDistortCoordinates.js'); var cornerCoordinates = parseDistortCoordinates(options); - if (!options.inBrowser) { - // this.output = input; - // callback(); - require('../_nomodule/gl-context')(input, callback, step, options); + function extraManipulation(pixels, setRenderState, generateOutput) { + setRenderState(false); + if (!options.inBrowser) { + // this.output = input; + // callback(); + require('../_nomodule/gl-context')(input, callback, step, options); + } + else { + var image = document.createElement('img'); + + const getDataUri = require('../../util/getDataUri'); + getDataUri(pixels, input.format).then(dataUri => { + image.src = dataUri; + image.id = 'img'; + document.body.appendChild(image); + image.onload = () => { + warpWebGl( + 'img', + [0, 0, image.naturalWidth, 0, image.naturalWidth, image.naturalHeight, 0, image.naturalHeight], // matrix 1 (before) corner coordinates, NW, NE, SE, SW + // [0, 100, 1023, -50, 1223, 867, 100, 767] // matrix 2 (after) corner coordinates + cornerCoordinates + ); + image.onload = () => { + var canvas = document.createElement('canvas'); + canvas.width = image.naturalWidth; // or 'width' if you want a special/scaled size + canvas.height = image.naturalHeight; // or 'height' if you want a special/scaled size + canvas.getContext('2d').drawImage(image, 0, 0); + var link = document.createElement('a'); + link.download = 'my-image.png'; + link.href = canvas.toDataURL(); + link.click(); + step.output = { src: canvas.toDataURL(), format: input.format }; + image.remove(); + callback(); + setRenderState(true); + generateOutput(); + }; + }; + }); + } } - else { - var image = document.createElement('img'); - image.onload = () => { - warpWebGl( - 'img', - [0, 0, image.naturalWidth, 0, image.naturalWidth, image.naturalHeight, 0, image.naturalHeight], // matrix 1 (before) corner coordinates, NW, NE, SE, SW - // [0, 100, 1023, -50, 1223, 867, 100, 767] // matrix 2 (after) corner coordinates - cornerCoordinates - ); - image.onload = () => { - var canvas = document.createElement('canvas'); - canvas.width = image.naturalWidth; // or 'width' if you want a special/scaled size - canvas.height = image.naturalHeight; // or 'height' if you want a special/scaled size - canvas.getContext('2d').drawImage(image, 0, 0); - - step.output = { src: canvas.toDataURL('image/png'), format: 'png' }; - image.remove(); - callback(); - }; - }; - image.src = input.src; - image.id = 'img'; - document.body.appendChild(image); + 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 41ea1cfd1019c2caf848406acdff7d9970c27e83 Mon Sep 17 00:00:00 2001 From: ataata107 Date: Wed, 5 Feb 2020 03:23:21 +0530 Subject: [PATCH 2/2] Added support for gifs --- src/modules/WebglDistort/Module.js | 73 +++++++++++++++++------------- 1 file changed, 42 insertions(+), 31 deletions(-) diff --git a/src/modules/WebglDistort/Module.js b/src/modules/WebglDistort/Module.js index d54ff9cd1c..608180e755 100644 --- a/src/modules/WebglDistort/Module.js +++ b/src/modules/WebglDistort/Module.js @@ -35,7 +35,7 @@ module.exports = function DoNothing(options, UI) { }; - var warpWebGl = function warpWebGl(id, matrix1, matrix2, download) { + var warpWebGl = function warpWebGl(dataURI, matrix1, matrix2, download, cb) { // try to create a WebGL canvas (will fail if WebGL isn't supported) try { @@ -46,7 +46,7 @@ module.exports = function DoNothing(options, UI) { } // convert the image to a texture - var imageEl = document.getElementById(id); + // var imageEl = document.getElementById(id); var image = new Image(); @@ -168,13 +168,14 @@ module.exports = function DoNothing(options, UI) { // keep non-blob version in case we have to fall back: // image.src = canvas.toDataURL('image/png'); // window.location = canvas.toDataURL('image/png'); - imageEl.src = burl; + // imageEl.src = burl; + cb(burl); } }; - image.src = imageEl.src; + image.src = dataURI; }; @@ -198,36 +199,46 @@ module.exports = function DoNothing(options, UI) { require('../_nomodule/gl-context')(input, callback, step, options); } else { - var image = document.createElement('img'); + // var image = document.createElement('img'); const getDataUri = require('../../util/getDataUri'); + const getPixels = require('get-pixels'), + pixelSetter = require('../../util/pixelSetter.js'); getDataUri(pixels, input.format).then(dataUri => { - image.src = dataUri; - image.id = 'img'; - document.body.appendChild(image); - image.onload = () => { - warpWebGl( - 'img', - [0, 0, image.naturalWidth, 0, image.naturalWidth, image.naturalHeight, 0, image.naturalHeight], // matrix 1 (before) corner coordinates, NW, NE, SE, SW - // [0, 100, 1023, -50, 1223, 867, 100, 767] // matrix 2 (after) corner coordinates - cornerCoordinates - ); - image.onload = () => { - var canvas = document.createElement('canvas'); - canvas.width = image.naturalWidth; // or 'width' if you want a special/scaled size - canvas.height = image.naturalHeight; // or 'height' if you want a special/scaled size - canvas.getContext('2d').drawImage(image, 0, 0); - var link = document.createElement('a'); - link.download = 'my-image.png'; - link.href = canvas.toDataURL(); - link.click(); - step.output = { src: canvas.toDataURL(), format: input.format }; - image.remove(); - callback(); - setRenderState(true); - generateOutput(); - }; - }; + + warpWebGl( + dataUri, + [0, 0, pixels.shape[0], 0, pixels.shape[0], pixels.shape[1], 0, pixels.shape[1]], // matrix 1 (before) corner coordinates, NW, NE, SE, SW + // [0, 100, 1023, -50, 1223, 867, 100, 767] // matrix 2 (after) corner coordinates + cornerCoordinates, + null, + function (burl) { + getPixels(burl, function (err, qrPixels) { + for (let x = 0; x < pixels.shape[0]; x++) { + for (let y = 0; y < pixels.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 + ); + } + } + + setRenderState(true); + generateOutput(); + }); + + + } + ); + + }); } }