mirror of
https://github.com/publiclab/image-sequencer.git
synced 2025-12-13 11:50:02 +01:00
Added Eslint and husky (#1062)
This commit is contained in:
aashna27
Jeffrey Warren
@@ -3,228 +3,228 @@
|
||||
*/
|
||||
module.exports = function DoNothing(options, UI) {
|
||||
|
||||
var defaults = require('./../../util/getDefaults.js')(require('./info.json'));
|
||||
var defaults = require('./../../util/getDefaults.js')(require('./info.json'));
|
||||
|
||||
var output;
|
||||
var fx = require('./glfx')
|
||||
var output;
|
||||
var fx = require('./glfx');
|
||||
|
||||
var dataURItoBlob = function dataURItoBlob(dataURI) {
|
||||
// convert base64/URLEncoded data component to raw binary data held in a string
|
||||
var byteString;
|
||||
if (dataURI.split(',')[0].indexOf('base64') >= 0)
|
||||
byteString = atob(dataURI.split(',')[1]);
|
||||
else
|
||||
byteString = unescape(dataURI.split(',')[1]);
|
||||
var dataURItoBlob = function dataURItoBlob(dataURI) {
|
||||
// convert base64/URLEncoded data component to raw binary data held in a string
|
||||
var byteString;
|
||||
if (dataURI.split(',')[0].indexOf('base64') >= 0)
|
||||
byteString = atob(dataURI.split(',')[1]);
|
||||
else
|
||||
byteString = unescape(dataURI.split(',')[1]);
|
||||
|
||||
// separate out the mime component
|
||||
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
|
||||
// separate out the mime component
|
||||
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
|
||||
|
||||
// write the bytes of the string to a typed array
|
||||
var ia = new Uint8Array(byteString.length);
|
||||
for (var i = 0; i < byteString.length; i++) {
|
||||
ia[i] = byteString.charCodeAt(i);
|
||||
}
|
||||
|
||||
return new Blob([ia], { type: mimeString });
|
||||
// write the bytes of the string to a typed array
|
||||
var ia = new Uint8Array(byteString.length);
|
||||
for (var i = 0; i < byteString.length; i++) {
|
||||
ia[i] = byteString.charCodeAt(i);
|
||||
}
|
||||
|
||||
var canvasToBlobUrl = function canvasToBlobUrl(canvas) {
|
||||
return new Blob([ia], { type: mimeString });
|
||||
};
|
||||
|
||||
var blob = dataURItoBlob(canvas.toDataURL('image/png'));
|
||||
return window.URL.createObjectURL(blob);
|
||||
var canvasToBlobUrl = function canvasToBlobUrl(canvas) {
|
||||
|
||||
var blob = dataURItoBlob(canvas.toDataURL('image/png'));
|
||||
return window.URL.createObjectURL(blob);
|
||||
|
||||
};
|
||||
|
||||
var warpWebGl = function warpWebGl(id, matrix1, matrix2, download) {
|
||||
|
||||
// try to create a WebGL canvas (will fail if WebGL isn't supported)
|
||||
try {
|
||||
var canvas = fx.canvas(1500, 1500);
|
||||
} catch (e) {
|
||||
alert(e);
|
||||
return;
|
||||
}
|
||||
|
||||
var warpWebGl = function warpWebGl(id, matrix1, matrix2, download) {
|
||||
// convert the image to a texture
|
||||
var imageEl = document.getElementById(id);
|
||||
|
||||
// try to create a WebGL canvas (will fail if WebGL isn't supported)
|
||||
try {
|
||||
var canvas = fx.canvas(1500, 1500);
|
||||
} catch (e) {
|
||||
alert(e);
|
||||
return;
|
||||
}
|
||||
var image = new Image();
|
||||
|
||||
// convert the image to a texture
|
||||
var imageEl = document.getElementById(id);
|
||||
image.onload = function() {
|
||||
|
||||
var image = new Image();
|
||||
var texture = canvas.texture(image);
|
||||
|
||||
image.onload = function() {
|
||||
var bbox1 = {
|
||||
nw: {
|
||||
x: matrix1[0],
|
||||
y: matrix1[1]
|
||||
},
|
||||
ne: {
|
||||
x: matrix1[2],
|
||||
y: matrix1[3]
|
||||
},
|
||||
se: {
|
||||
x: matrix1[4],
|
||||
y: matrix1[5]
|
||||
},
|
||||
sw: {
|
||||
x: matrix1[6],
|
||||
y: matrix1[7]
|
||||
}
|
||||
},
|
||||
bbox2 = {
|
||||
nw: {
|
||||
x: matrix2[0],
|
||||
y: matrix2[1]
|
||||
},
|
||||
ne: {
|
||||
x: matrix2[2],
|
||||
y: matrix2[3]
|
||||
},
|
||||
se: {
|
||||
x: matrix2[4],
|
||||
y: matrix2[5]
|
||||
},
|
||||
sw: {
|
||||
x: matrix2[6],
|
||||
y: matrix2[7]
|
||||
}
|
||||
};
|
||||
|
||||
var texture = canvas.texture(image);
|
||||
var matrix1Xs = [],
|
||||
matrix1Ys = [];
|
||||
|
||||
var bbox1 = {
|
||||
nw: {
|
||||
x: matrix1[0],
|
||||
y: matrix1[1]
|
||||
},
|
||||
ne: {
|
||||
x: matrix1[2],
|
||||
y: matrix1[3]
|
||||
},
|
||||
se: {
|
||||
x: matrix1[4],
|
||||
y: matrix1[5]
|
||||
},
|
||||
sw: {
|
||||
x: matrix1[6],
|
||||
y: matrix1[7]
|
||||
}
|
||||
},
|
||||
bbox2 = {
|
||||
nw: {
|
||||
x: matrix2[0],
|
||||
y: matrix2[1]
|
||||
},
|
||||
ne: {
|
||||
x: matrix2[2],
|
||||
y: matrix2[3]
|
||||
},
|
||||
se: {
|
||||
x: matrix2[4],
|
||||
y: matrix2[5]
|
||||
},
|
||||
sw: {
|
||||
x: matrix2[6],
|
||||
y: matrix2[7]
|
||||
}
|
||||
};
|
||||
for (var i = 0; i < matrix1.length; i += 2) {
|
||||
matrix1Xs.push(matrix1[i]);
|
||||
}
|
||||
|
||||
var matrix1Xs = [],
|
||||
matrix1Ys = [];
|
||||
for (var i = 1; i < matrix1.length; i += 2) {
|
||||
matrix1Ys.push(matrix1[i]);
|
||||
}
|
||||
|
||||
for (var i = 0; i < matrix1.length; i += 2) {
|
||||
matrix1Xs.push(matrix1[i])
|
||||
}
|
||||
var matrix1northmost = Math.min.apply(null, matrix1Ys);
|
||||
matrix1southmost = Math.max.apply(null, matrix1Ys);
|
||||
matrix1westmost = Math.min.apply(null, matrix1Xs);
|
||||
matrix1eastmost = Math.max.apply(null, matrix1Xs);
|
||||
|
||||
for (var i = 1; i < matrix1.length; i += 2) {
|
||||
matrix1Ys.push(matrix1[i])
|
||||
}
|
||||
var matrix2Xs = [],
|
||||
matrix2Ys = [];
|
||||
|
||||
var matrix1northmost = Math.min.apply(null, matrix1Ys)
|
||||
matrix1southmost = Math.max.apply(null, matrix1Ys)
|
||||
matrix1westmost = Math.min.apply(null, matrix1Xs)
|
||||
matrix1eastmost = Math.max.apply(null, matrix1Xs);
|
||||
for (var i = 0; i < matrix2.length; i += 2) {
|
||||
matrix2Xs.push(matrix2[i]);
|
||||
}
|
||||
|
||||
var matrix2Xs = [],
|
||||
matrix2Ys = [];
|
||||
for (var i = 1; i < matrix2.length; i += 2) {
|
||||
matrix2Ys.push(matrix2[i]);
|
||||
}
|
||||
|
||||
for (var i = 0; i < matrix2.length; i += 2) {
|
||||
matrix2Xs.push(matrix2[i])
|
||||
}
|
||||
var matrix2northmost = Math.min.apply(null, matrix2Ys);
|
||||
matrix2southmost = Math.max.apply(null, matrix2Ys);
|
||||
matrix2westmost = Math.min.apply(null, matrix2Xs);
|
||||
matrix2eastmost = Math.max.apply(null, matrix2Xs);
|
||||
|
||||
for (var i = 1; i < matrix2.length; i += 2) {
|
||||
matrix2Ys.push(matrix2[i])
|
||||
}
|
||||
var offsetX = matrix2westmost - matrix1westmost;
|
||||
var offsetY = matrix2northmost - matrix1northmost;
|
||||
|
||||
var matrix2northmost = Math.min.apply(null, matrix2Ys)
|
||||
matrix2southmost = Math.max.apply(null, matrix2Ys)
|
||||
matrix2westmost = Math.min.apply(null, matrix2Xs)
|
||||
matrix2eastmost = Math.max.apply(null, matrix2Xs);
|
||||
canvas.draw(texture,
|
||||
image.width,// * ratio,
|
||||
image.height// * ratio
|
||||
);
|
||||
|
||||
var offsetX = matrix2westmost - matrix1westmost;
|
||||
var offsetY = matrix2northmost - matrix1northmost;
|
||||
|
||||
canvas.draw(texture,
|
||||
image.width,// * ratio,
|
||||
image.height// * ratio
|
||||
);
|
||||
|
||||
var ratioY = (matrix2southmost - matrix2northmost)
|
||||
var ratioY = (matrix2southmost - matrix2northmost)
|
||||
/ (matrix1southmost - matrix1northmost);
|
||||
|
||||
var ratioX = (matrix2eastmost - matrix2westmost)
|
||||
var ratioX = (matrix2eastmost - matrix2westmost)
|
||||
/ (matrix1eastmost - matrix1westmost);
|
||||
|
||||
var ratio = Math.max(ratioX, ratioY);
|
||||
var ratio = Math.max(ratioX, ratioY);
|
||||
|
||||
// stretch output matrix x to fix:
|
||||
for (var i = 0; i < matrix2.length; i += 2) {
|
||||
matrix2[i] -= offsetX;
|
||||
matrix2[i] /= ratio;
|
||||
}
|
||||
// stretch output matrix x to fix:
|
||||
for (var i = 0; i < matrix2.length; i += 2) {
|
||||
matrix2[i] -= offsetX;
|
||||
matrix2[i] /= ratio;
|
||||
}
|
||||
|
||||
// stretch output matrix y to fix:
|
||||
for (var i = 1; i < matrix2.length; i += 2) {
|
||||
matrix2[i] -= offsetY;
|
||||
matrix2[i] /= ratio;
|
||||
}
|
||||
// stretch output matrix y to fix:
|
||||
for (var i = 1; i < matrix2.length; i += 2) {
|
||||
matrix2[i] -= offsetY;
|
||||
matrix2[i] /= ratio;
|
||||
}
|
||||
|
||||
canvas.perspective(matrix1, matrix2).update();
|
||||
canvas.perspective(matrix1, matrix2).update();
|
||||
|
||||
// replace the image with the canvas
|
||||
// image.parentNode.insertBefore(canvas, image);
|
||||
// image.parentNode.removeChild(image);
|
||||
// replace the image with the canvas
|
||||
// image.parentNode.insertBefore(canvas, image);
|
||||
// image.parentNode.removeChild(image);
|
||||
|
||||
var burl = canvasToBlobUrl(canvas);
|
||||
var burl = canvasToBlobUrl(canvas);
|
||||
|
||||
if (download) {
|
||||
if (download) {
|
||||
|
||||
window.open(burl);
|
||||
window.open(burl);
|
||||
|
||||
} else { // replace the image
|
||||
} else { // replace the image
|
||||
|
||||
// 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;
|
||||
// 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;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
image.src = imageEl.src;
|
||||
image.src = imageEl.src;
|
||||
|
||||
};
|
||||
|
||||
function draw(input, callback) {
|
||||
|
||||
var step = this;
|
||||
|
||||
options.nw = options.nw || defaults.nw;
|
||||
options.ne = options.ne || defaults.ne;
|
||||
options.se = options.se || defaults.se;
|
||||
options.sw = options.sw || defaults.sw;
|
||||
|
||||
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);
|
||||
}
|
||||
else {
|
||||
var image = document.createElement('img');
|
||||
image.onload = () => {
|
||||
warpWebGl(
|
||||
'img',
|
||||
[0, 0, 1023, 0, 1023, 767, 0, 767], // 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);
|
||||
|
||||
function draw(input, callback) {
|
||||
|
||||
var step = this;
|
||||
|
||||
options.nw = options.nw || defaults.nw;
|
||||
options.ne = options.ne || defaults.ne;
|
||||
options.se = options.se || defaults.se;
|
||||
options.sw = options.sw || defaults.sw;
|
||||
|
||||
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);
|
||||
}
|
||||
else {
|
||||
var image = document.createElement('img');
|
||||
image.onload = () => {
|
||||
warpWebGl(
|
||||
'img',
|
||||
[0, 0, 1023, 0, 1023, 767, 0, 767], // 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);
|
||||
}
|
||||
step.output = { src: canvas.toDataURL('image/png'), format: 'png' };
|
||||
image.remove();
|
||||
callback();
|
||||
};
|
||||
};
|
||||
image.src = input.src;
|
||||
image.id = 'img';
|
||||
document.body.appendChild(image);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
options: options,
|
||||
draw: draw,
|
||||
output: output,
|
||||
UI: UI
|
||||
}
|
||||
}
|
||||
return {
|
||||
options: options,
|
||||
draw: draw,
|
||||
output: output,
|
||||
UI: UI
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user