mirror of
https://github.com/publiclab/image-sequencer.git
synced 2025-12-09 01:39:59 +01:00
Merge branch 'ui-tests' of github.com:publiclab/image-sequencer into ui-tests
This commit is contained in:
jywarren
4
.github/PULL_REQUEST_TEMPLATE.md
vendored
4
.github/PULL_REQUEST_TEMPLATE.md
vendored
@@ -6,11 +6,11 @@ Make sure these boxes are checked before your pull request (PR) is ready to be r
|
||||
* [ ] code is in uniquely-named feature branch and has no merge conflicts
|
||||
* [ ] PR is descriptively titled
|
||||
* [ ] ask `@publiclab/is-reviewers` for help, in a comment below
|
||||
|
||||
* [ ] Insert-step functionality is working correct as expected.
|
||||
> We're happy to help you get this ready -- don't be afraid to ask for help, and **don't be discouraged** if your tests fail at first!
|
||||
|
||||
If tests do fail, click on the red `X` to learn why by reading the logs.
|
||||
|
||||
Please be sure you've reviewed our contribution guidelines at https://publiclab.org/contributing-to-public-lab-software
|
||||
|
||||
Please make sure to get at least two reviews before asking for merging the PR as that would make the PR more reliable on our part
|
||||
Thanks!
|
||||
|
||||
@@ -425,8 +425,10 @@ var $step = scopeQuery.scopeSelector(scope),
|
||||
This will return an object with a constructor which returns a `jQuery` object (from inside the scope) but with new `elem` and `elemAll` methods.
|
||||
|
||||
#### Methods of the Returned Object
|
||||
* `elem()`: Selects an element inside the scope;
|
||||
* `elemAll()`: Selects all the instances of a given element inside the scope;
|
||||
* `elem()`: Selects an element inside the scope.
|
||||
* `elemAll()`: Selects all the instances of a given element inside the scope.
|
||||
* `getScope()`: Returns the scope as a DOM element.
|
||||
* `getDomElem()`: Returns the scoped element as a DOM element instead of a jquery object.
|
||||
|
||||
#### Example
|
||||
|
||||
|
||||
17
Gruntfile.js
17
Gruntfile.js
@@ -2,6 +2,7 @@ module.exports = function(grunt) {
|
||||
grunt.loadNpmTasks('grunt-browserify');
|
||||
grunt.loadNpmTasks('grunt-contrib-uglify-es');
|
||||
grunt.loadNpmTasks('grunt-browser-sync');
|
||||
grunt.loadNpmTasks('grunt-contrib-jasmine');
|
||||
|
||||
require('matchdep')
|
||||
.filterDev('grunt-*')
|
||||
@@ -57,6 +58,7 @@ module.exports = function(grunt) {
|
||||
dest: 'dist/image-sequencer-ui.js'
|
||||
}
|
||||
},
|
||||
|
||||
browserSync: {
|
||||
dev: {
|
||||
options: {
|
||||
@@ -64,6 +66,21 @@ module.exports = function(grunt) {
|
||||
server: './'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
jasmine: {
|
||||
imageSequencer: {
|
||||
src: 'dist/*.js',
|
||||
options: {
|
||||
specs: 'test/ui/spec/*spec.js',
|
||||
vendor: [
|
||||
'node_modules/jquery/dist/jquery.min.js',
|
||||
'node_modules/bootstrap/dist/js/bootstrap.min.js',
|
||||
'node_modules/jasmine-jquery/lib/jasmine-jquery.js',
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
624
docs/MODULES.md
624
docs/MODULES.md
@@ -3,48 +3,229 @@ Documentation of various Modules
|
||||
|
||||
List of Module Documentations
|
||||
|
||||
1. [Crop](#crop-module)
|
||||
2. [Segmented-Colormap](#segmented-colormap-module)
|
||||
3. [FisheyeGl](#fisheyeGl-module)
|
||||
4. [Add QR](#Add-QR-module)
|
||||
5. [Average](#average-module)
|
||||
6. [Blend](#blend-module)
|
||||
7. [Blur](#blur-module)
|
||||
8. [Brightness](#brightness-module)
|
||||
9. [Channel](#channel-module)
|
||||
10. [Colorbar](#colorbar-module)
|
||||
11. [Colormap](#colormap-module)
|
||||
12. [Contrast](#contrast-module)
|
||||
13. [Convolution](#convolution-module)
|
||||
14. [DecodeQr](#decodeQr-module)
|
||||
15. [Dither](#dither-module)
|
||||
16. [DrawRectangle](#draw-rectangle-module)
|
||||
17. [Dynamic](#dynamic-module)
|
||||
18. [Edge-Detect](#edge-detect-module)
|
||||
1. [Add QR](#Add-QR-module)
|
||||
2. [Average](#average-module)
|
||||
3. [Blend](#blend-module)
|
||||
4. [Blur](#blur-module)
|
||||
5. [Brightness](#brightness-module)
|
||||
6. [Channel](#channel-module)
|
||||
7. [Colorbar](#colorbar-module)
|
||||
8. [Colormap](#colormap-module)
|
||||
9. [ColorTemperature](#color-temperature)
|
||||
10. [Contrast](#contrast-module)
|
||||
11. [Convolution](#convolution-module)
|
||||
12. [Crop](#crop-module)
|
||||
13. [DecodeQr](#decodeQr-module)
|
||||
14. [Dither](#dither-module)
|
||||
15. [DrawRectangle](#draw-rectangle-module)
|
||||
16. [Dynamic](#dynamic-module)
|
||||
17. [Edge-Detect](#edge-detect-module)
|
||||
18. [FisheyeGl](#fisheyeGl-module)
|
||||
19. [FlipImage](#flipimage-module)
|
||||
20. [Gamma-Correction](#gamma-correction-module)
|
||||
21. [Gradient](#gradient-module)
|
||||
22. [Histogram](#histogram-module)
|
||||
23. [Import-image](#import-image-module)
|
||||
24. [Invert](#invert-module)
|
||||
25. [Ndvi](#ndvi-module)
|
||||
26. [Ndvi-Colormap](#ndvi-colormap-module)
|
||||
27. [Overlay](#overlay-module)
|
||||
28. [PaintBucket](#paint-bucket-module)
|
||||
29. [Resize](#resize-module)
|
||||
30. [ReplaceColor](#replacecolor-module)
|
||||
31. [Rotate](#rotate-module)
|
||||
32. [Saturation](#saturation-module)
|
||||
33. [Threshold](#threshold)
|
||||
34. [Tint](#tint)
|
||||
35. [ColorTemperature](#color-temperature)
|
||||
36. [Grid-Overlay](#grid-overlay)
|
||||
22. [Grid-Overlay](#grid-overlay)
|
||||
23. [Histogram](#histogram-module)
|
||||
24. [Import-image](#import-image-module)
|
||||
25. [Invert](#invert-module)
|
||||
26. [MinifyImage](#minify-image)
|
||||
27. [Ndvi](#ndvi-module)
|
||||
28. [Ndvi-Colormap](#ndvi-colormap-module)
|
||||
29. [Overlay](#overlay-module)
|
||||
30. [PaintBucket](#paint-bucket-module)
|
||||
31. [ReplaceColor](#replacecolor-module)
|
||||
32. [Resize](#resize-module)
|
||||
33. [Rotate](#rotate-module)
|
||||
34. [Saturation](#saturation-module)
|
||||
35. [Segmented-Colormap](#segmented-colormap-module)
|
||||
36. [Text-Overlay](#text-overlay)
|
||||
37. [Threshold](#threshold)
|
||||
38. [Tint](#tint)
|
||||
|
||||
|
||||
## add-qr-module
|
||||
|
||||
This module Adds QR corresponding to the given string.
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('add-qr',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
where `options` is an object with the following properties:
|
||||
* size : size of QR code in pixels (default 200)
|
||||
* qrCodeString : input string to generate QR code
|
||||
|
||||
|
||||
## average-module
|
||||
|
||||
This module is used for averaging all the pixels of the image.
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('average',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
|
||||
## blend-module
|
||||
|
||||
This module is used for blending two images .
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('blend',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
where `options` is an object with the following properties:
|
||||
* offset: step of image with which current image is to be blended(Two steps back is -2, three steps back is -3 etc; default -2)
|
||||
* func: function used to blend two images (default : function(r1, g1, b1, a1, r2, g2, b2, a2) { return [ r1, g2, b2, a2 ] })
|
||||
|
||||
## Blob Analysis
|
||||
|
||||
This module uses Opencv.js for detecting and marking blob/region in microscopic images. It requires an opencv.js file to
|
||||
be loaded before using the functionalities which is currently being loaded to the webpage via script.It supports both environments, Node.js and browser for processing.
|
||||
|
||||
As the size of opencv.js file is quite large, the future versions will focus on loading it asynchronously, on demand of the the module to optimise performance.
|
||||
|
||||
#### Usage
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('blob-analysis')
|
||||
.run()
|
||||
```
|
||||
|
||||
## blur-module
|
||||
|
||||
This module is used for applying a Gaussian blur effect.
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('blur',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
where `options` is an object with the following property:
|
||||
* blur : Intensity of Gaussian blur (0 to 5; default 2)
|
||||
|
||||
|
||||
## brightness-module
|
||||
|
||||
This module is used for changing the brightness of the image.
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('brightness',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
where `options` is an object with the following property:
|
||||
* brightness : brightness of the image in percentage (0 to 100; default 100)
|
||||
|
||||
|
||||
## channel-module
|
||||
|
||||
This module is used for forming a grayscale image by applying one of the three primary colors.
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('channel',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
where `options` is an object with the following property:
|
||||
* channel : color of the channel (red, green, blue; default green)
|
||||
|
||||
|
||||
## colorbar-module
|
||||
|
||||
This module is used for displaying an image with a colorbar.
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('colorbar',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
where `options` is an object with the following properties:
|
||||
* colormap : Name of the Colormap(default, greyscale, stretched, fastie, brntogrn, blutoredjet, colors16; default: default)
|
||||
* x : X-position of the image on which the new image is overlayed (default 0)
|
||||
* y : Y-position of the image on which the new image is overlayed (default 0)
|
||||
* h : height of resulting cropped image (default : 50% of input image width )
|
||||
|
||||
|
||||
## colormap-module
|
||||
|
||||
This module is used for mapping brightness values (average of red, green & blue) to a given color lookup table, made up of a set of one more color gradients.
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('colormap',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
where `options` is an object with the following property:
|
||||
* colormap : Name of the Colormap ( greyscale, stretched, fastie, brntogrn, blutoredjet, colors16)
|
||||
|
||||
|
||||
## Color Temperature
|
||||
|
||||
This changes the color temperature of the image.
|
||||
## Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('color-temperature',options)
|
||||
.run()
|
||||
```
|
||||
where `options` is an object with the following property:
|
||||
* temperature : temperature between 0 - 40,000 kelvin (default 6000)
|
||||
|
||||
|
||||
## contrast-module
|
||||
|
||||
This module is used for changing the contrast of the image.
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('contrast',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
where `options` is an object with the following property:
|
||||
* contrast : contrast for the given image (-100 to 100; default : 70)
|
||||
|
||||
|
||||
## convolution-module
|
||||
|
||||
This module is used for performing image-convolution.
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('convolution',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
where `options` is an object with the following properties:
|
||||
* constantFactor : a constant factor, multiplies all the kernel values by that factor (default : 1/9)
|
||||
* kernelValues : nine space separated numbers representing the kernel values in left to right and top to bottom format(default : 1 1 1 1 1 1 1 1 1)
|
||||
|
||||
|
||||
## crop-module
|
||||
|
||||
This module is used to crop an image.
|
||||
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
@@ -64,208 +245,9 @@ Where `options` is an object having the properties `x`, `y`, `w`, `h`. This diag
|
||||
* `options.h` : half of image height
|
||||
|
||||
|
||||
## segmented-colormap-module
|
||||
|
||||
This module is used to map the pixels of the image to a segmented colormap.
|
||||
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('segmented-colormap',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
where `options` is an object with the property `colormap`. `options.colormap` can be:
|
||||
|
||||
* "default" : [[0, [0, 0, 255], [38, 195, 195]], [0.5, [0, 150, 0], [255, 255, 0]], [0.75, [255, 255, 0], [255, 50, 50]]]
|
||||
|
||||
* "greyscale" : [[0, [0, 0, 0], [255, 255, 255]], [1, [255, 255, 255], [255, 255, 255]]]
|
||||
|
||||
* "stretched" : [[0, [0, 0, 255], [0, 0, 255]], [0.1, [0, 0, 255], [38, 195, 195]], [0.5, [0, 150, 0], [255, 255, 0]], [0.7, [255, 255, 0], [255, 50, 50]], [0.9, [255, 50, 50], [255, 50, 50]]]
|
||||
|
||||
* "fastie" : [[0, [255, 255, 255], [0, 0, 0]], [0.167, [0, 0, 0], [255, 255, 255]], [0.33, [255, 255, 255], [0, 0, 0]], [0.5, [0, 0, 0], [140, 140, 255]], [0.55, [140, 140, 255], [0, 255, 0]], [0.63, [0, 255, 0], [255, 255, 0]], [0.75, [255, 255, 0], [255, 0, 0]], [0.95, [255, 0, 0], [255, 0, 255]]]
|
||||
|
||||
* A custom array.
|
||||
|
||||
## fisheyeGl-module
|
||||
|
||||
This module is used for correcting Fisheye or Lens Distortion
|
||||
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('fisheye-gl',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
where `options` is an object with the following properties:
|
||||
* a : a correction (0 to 4; default 1)
|
||||
* b : b correction (0 to 4; default 1)
|
||||
* Fx : x correction (0 to 4; default 1)
|
||||
* Fy : y correction (0 to 4; default 1)
|
||||
* scale : The ratio to which the original image is to be scaled (0 to 20; default 1.5)
|
||||
* x : Field of View x (0 to 2; default 1)
|
||||
* y : Field of View y (0 to 2; default 1)
|
||||
|
||||
## add-qr-module
|
||||
|
||||
This module Adds QR corresponding to the given string.
|
||||
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('add-qr',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
where `options` is an object with the following properties:
|
||||
* size : size of QR code in pixels (default 200)
|
||||
* qrCodeString : input string to generate QR code
|
||||
|
||||
|
||||
## average-module
|
||||
|
||||
This module is used for averaging all the pixels of the image.
|
||||
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('average',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
## blend-module
|
||||
|
||||
This module is used for blending two images .
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('blend',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
where `options` is an object with the following properties:
|
||||
* offset: step of image with which current image is to be blended(Two steps back is -2, three steps back is -3 etc; default -2)
|
||||
* func: function used to blend two images (default : function(r1, g1, b1, a1, r2, g2, b2, a2) { return [ r1, g2, b2, a2 ] })
|
||||
|
||||
## blur-module
|
||||
|
||||
This module is used for applying a Gaussian blur effect.
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('blur',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
where `options` is an object with the following property:
|
||||
* blur : Intensity of Gaussian blur (0 to 5; default 2)
|
||||
|
||||
## brightness-module
|
||||
|
||||
This module is used for changing the brightness of the image.
|
||||
|
||||
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('brightness',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
where `options` is an object with the following property:
|
||||
* brightness : brightness of the image in percentage (0 to 100; default 100)
|
||||
|
||||
## channel-module
|
||||
|
||||
This module is used for forming a grayscale image by applying one of the three primary colors.
|
||||
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('channel',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
where `options` is an object with the following property:
|
||||
* channel : color of the channel (red, green, blue; default green)
|
||||
|
||||
## colorbar-module
|
||||
|
||||
This module is used for displaying an image with a colorbar.
|
||||
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('colorbar',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
where `options` is an object with the following properties:
|
||||
* colormap : Name of the Colormap(default, greyscale, stretched, fastie, brntogrn, blutoredjet, colors16; default: default)
|
||||
* x : X-position of the image on which the new image is overlayed (default 0)
|
||||
* y : Y-position of the image on which the new image is overlayed (default 0)
|
||||
* h : height of resulting cropped image (default : 50% of input image width )
|
||||
|
||||
## colormap-module
|
||||
|
||||
This module is used for mapping brightness values (average of red, green & blue) to a given color lookup table, made up of a set of one more color gradients.
|
||||
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('colormap',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
where `options` is an object with the following property:
|
||||
* colormap : Name of the Colormap ( greyscale, stretched, fastie, brntogrn, blutoredjet, colors16)
|
||||
|
||||
## contrast-module
|
||||
|
||||
This module is used for changing the contrast of the image.
|
||||
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('contrast',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
where `options` is an object with the following property:
|
||||
* contrast : contrast for the given image (-100 to 100; default : 70)
|
||||
|
||||
## convolution-module
|
||||
|
||||
This module is used for performing image-convolution.
|
||||
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('convolution',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
where `options` is an object with the following properties:
|
||||
* constantFactor : a constant factor, multiplies all the kernel values by that factor (default : 1/9)
|
||||
* kernelValues : nine space separated numbers representing the kernel values in left to right and top to bottom format(default : 1 1 1 1 1 1 1 1 1)
|
||||
|
||||
## decodeQr-module
|
||||
|
||||
This module is used for decoding a QR in image (if present).
|
||||
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
@@ -279,8 +261,7 @@ This module is used for decoding a QR in image (if present).
|
||||
This module approximates a color from a mixture of other colors when the required color is not available, creating illusions of the color that is not present actually.
|
||||
|
||||
[more info on wikipedia](https://en.wikipedia.org/wiki/Dither)
|
||||
|
||||
## Usage
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
@@ -290,10 +271,10 @@ This module approximates a color from a mixture of other colors when the require
|
||||
where `options` is an object with the following property:
|
||||
* dither : Can select the name of the Dithering Algorithm(default none)
|
||||
|
||||
|
||||
## draw-rectangle-module
|
||||
|
||||
This module helps to draw a rectangle on the image with a starting and ending corner with the specified thickness and color of the border.
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
@@ -309,10 +290,10 @@ where `options` is an object with the following properties:
|
||||
* thickness : thickness of the border (default 1)
|
||||
* color : RGBA values separated by a space (default "0 0 0 255")
|
||||
|
||||
|
||||
## dynamic-module
|
||||
|
||||
This module is used for producing each color channel based on the original image's color.
|
||||
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
@@ -327,6 +308,7 @@ where `options` is an object with the following properties:
|
||||
* blue : expression for blue channel (R, G, B and A as inputs; default b)
|
||||
* monochrome: fallback for other channels if none provided (default : r+g+b/3)
|
||||
|
||||
|
||||
## edge-detect-module
|
||||
|
||||
This module is used for detecting images.
|
||||
@@ -343,12 +325,33 @@ where `options` is an object with the following properties:
|
||||
* highThresholdRatio : Upper Threshold Ratio ( default : 0.2)
|
||||
* lowThresholdratio : Lower Threshold Ratio ( default : 0.2)
|
||||
|
||||
|
||||
## fisheyeGl-module
|
||||
|
||||
This module is used for correcting Fisheye or Lens Distortion
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('fisheye-gl',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
where `options` is an object with the following properties:
|
||||
* a : a correction (0 to 4; default 1)
|
||||
* b : b correction (0 to 4; default 1)
|
||||
* Fx : x correction (0 to 4; default 1)
|
||||
* Fy : y correction (0 to 4; default 1)
|
||||
* scale : The ratio to which the original image is to be scaled (0 to 20; default 1.5)
|
||||
* x : Field of View x (0 to 2; default 1)
|
||||
* y : Field of View y (0 to 2; default 1)
|
||||
|
||||
|
||||
## flipimage-module
|
||||
|
||||
This module is used for flipping the image on the selected axis.
|
||||
#### Usage
|
||||
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('flip-image',options)
|
||||
@@ -373,6 +376,7 @@ This module is used for applying gamma correction.
|
||||
where `options` is an object with the following property:
|
||||
* adjustment : Inverse of actual gamma factor (default 0.2)
|
||||
|
||||
|
||||
## gradient-module
|
||||
|
||||
This module is used for finding gradient of the image.
|
||||
@@ -384,6 +388,23 @@ This module is used for finding gradient of the image.
|
||||
.run()
|
||||
```
|
||||
|
||||
|
||||
## Grid Overlay
|
||||
|
||||
This adds the grid over an image.
|
||||
## Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('grid-overlay',options)
|
||||
.run()
|
||||
```
|
||||
where `options` is an object with the following property:
|
||||
* options.x : The value at which the grid line should start in x-axis.
|
||||
* options.y : The value at which the grid line should start in y-axis.
|
||||
* color : Color for the grid on the image.
|
||||
|
||||
|
||||
## histogram-module
|
||||
|
||||
This module is used for calculating histogram of the image.
|
||||
@@ -398,6 +419,7 @@ This module is used for calculating histogram of the image.
|
||||
where `options` is an object with the following property:
|
||||
* gradient : boolean value used to toggle gradient along x-axis (true or false; default true)
|
||||
|
||||
|
||||
## import-image-module
|
||||
|
||||
This module is used for importing a new image and replacing the original with it.
|
||||
@@ -412,6 +434,7 @@ This module is used for importing a new image and replacing the original with it
|
||||
where `options` is an object with the following property:
|
||||
* url : url of the new image (local image url or data url;default : "./images/monarch.png")
|
||||
|
||||
|
||||
## invert-module
|
||||
|
||||
This module is used for inverting the image.
|
||||
@@ -423,6 +446,21 @@ This module is used for inverting the image.
|
||||
.run()
|
||||
```
|
||||
|
||||
|
||||
## Minify Image
|
||||
|
||||
This module minifies the image using lossy compression that is the image-dimensions are not lost but the size is reduced.
|
||||
|
||||
The module supports jpg/jpeg/webp images in browser; but the node version supports all of the types.
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('minify-image')
|
||||
.run()
|
||||
```
|
||||
|
||||
|
||||
## ndvi-module
|
||||
|
||||
This module is used for applying ndvi technique to the image.
|
||||
@@ -437,6 +475,7 @@ This module is used for applying ndvi technique to the image.
|
||||
where `options` is an object with the following property:
|
||||
* filter : filter for NDVI (blue or red; default red)
|
||||
|
||||
|
||||
## ndvi-colormap-module
|
||||
|
||||
This module is used for demonstrating ndvi and colormap properties consecutively.
|
||||
@@ -448,6 +487,7 @@ This module is used for demonstrating ndvi and colormap properties consecutively
|
||||
.run()
|
||||
```
|
||||
|
||||
|
||||
## overlay-module
|
||||
|
||||
This module is used for overlaying an Image over another .
|
||||
@@ -464,10 +504,10 @@ where `options` is an object with the following properties:
|
||||
* y : Y-position of the image on which the new image is overlayed (default 0)
|
||||
* offset : offset to the step on which the output of the last step is overlayed (default -2)
|
||||
|
||||
|
||||
## paint-bucket-module
|
||||
|
||||
This module fills any polygonal shape with the specified color in pixels.
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
@@ -482,19 +522,6 @@ where `options` is an object with the following property:
|
||||
* fillColor : they are four spaced seperated numbers representing the RGBA values of fill-color (default "100 100 100 255")
|
||||
* tolerance : it is the % tolerance (default 10)
|
||||
|
||||
## resize-module
|
||||
|
||||
This module is used for resizing an image.
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('resize',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
where `options` is an object with the following property:
|
||||
* resize : Percentage value of resize (default 125%)
|
||||
|
||||
## replacecolor-module
|
||||
|
||||
@@ -512,6 +539,22 @@ where `options` is an object with the following properties:
|
||||
* color : three space separated numbers representing the RGB values of color to be replaced (default "228 86 81")
|
||||
* tolerance : it is the % tolerance (default 50)
|
||||
|
||||
|
||||
## resize-module
|
||||
|
||||
This module is used for resizing an image.
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('resize',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
where `options` is an object with the following property:
|
||||
* resize : Percentage value of resize (default 125%)
|
||||
|
||||
|
||||
## rotate-module
|
||||
|
||||
This module is used for rotating an image.
|
||||
@@ -526,6 +569,7 @@ This module is used for rotating an image.
|
||||
where `options` is an object with the following property:
|
||||
* rotate : angular value for rotation in degrees (between 0 and 360; default 0)
|
||||
|
||||
|
||||
## saturation-module
|
||||
|
||||
This module is used for changing the saturation of the image.
|
||||
@@ -540,11 +584,49 @@ This module is used for changing the saturation of the image.
|
||||
where `options` is an object with the following property:
|
||||
* saturation : saturation for the new image (between 0 and 2; default 0)
|
||||
|
||||
|
||||
## segmented-colormap-module
|
||||
|
||||
This module is used to map the pixels of the image to a segmented colormap.
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('segmented-colormap',options)
|
||||
.run()
|
||||
```
|
||||
|
||||
where `options` is an object with the property `colormap`. `options.colormap` can be:
|
||||
|
||||
* "default" : [[0, [0, 0, 255], [38, 195, 195]], [0.5, [0, 150, 0], [255, 255, 0]], [0.75, [255, 255, 0], [255, 50, 50]]]
|
||||
|
||||
* "greyscale" : [[0, [0, 0, 0], [255, 255, 255]], [1, [255, 255, 255], [255, 255, 255]]]
|
||||
|
||||
* "stretched" : [[0, [0, 0, 255], [0, 0, 255]], [0.1, [0, 0, 255], [38, 195, 195]], [0.5, [0, 150, 0], [255, 255, 0]], [0.7, [255, 255, 0], [255, 50, 50]], [0.9, [255, 50, 50], [255, 50, 50]]]
|
||||
|
||||
* "fastie" : [[0, [255, 255, 255], [0, 0, 0]], [0.167, [0, 0, 0], [255, 255, 255]], [0.33, [255, 255, 255], [0, 0, 0]], [0.5, [0, 0, 0], [140, 140, 255]], [0.55, [140, 140, 255], [0, 255, 0]], [0.63, [0, 255, 0], [255, 255, 0]], [0.75, [255, 255, 0], [255, 0, 0]], [0.95, [255, 0, 0], [255, 0, 255]]]
|
||||
|
||||
* A custom array.
|
||||
|
||||
|
||||
## Text Overlay
|
||||
|
||||
The modules allows to add text to image in both browser and node environment. We have the options to modify the font-size and also support few font-styles. The text color can also be modified.
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('grid-overlay',options)
|
||||
.run()
|
||||
```
|
||||
The options can take various attributes like,
|
||||
var options = { text : 'Hello World', size : '12'};
|
||||
|
||||
|
||||
## Threshold
|
||||
|
||||
Thresholding is used to create binary images.
|
||||
|
||||
## Usage
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
@@ -559,8 +641,7 @@ where `options` is an object with the following property:
|
||||
## Tint
|
||||
|
||||
It adds color tint to an image
|
||||
|
||||
## Usage
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
@@ -570,34 +651,3 @@ It adds color tint to an image
|
||||
where `options` is an object with the following property:
|
||||
* color : RGB values seperated by a space (default "0 0 255")
|
||||
* factor : amount of tint (default 0.5)
|
||||
|
||||
|
||||
## Color Temperature
|
||||
|
||||
This changes the color temperature of the image.
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('color-temperature',options)
|
||||
.run()
|
||||
```
|
||||
where `options` is an object with the following property:
|
||||
* temperature : temperature between 0 - 40,000 kelvin (default 6000)
|
||||
|
||||
## Grid Overlay
|
||||
|
||||
This adds the grid over an image.
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
sequencer.loadImage('PATH')
|
||||
.addSteps('grid-overlay',options)
|
||||
.run()
|
||||
```
|
||||
where `options` is an object with the following property:
|
||||
* options.x : The value at which the grid line should start in x-axis.
|
||||
* options.y : The value at which the grid line should start in y-axis.
|
||||
* color : Color for the grid on the image.
|
||||
@@ -44,6 +44,7 @@ body > .container-fluid {
|
||||
.panel {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
min-width:400px;
|
||||
}
|
||||
|
||||
.nomargin {
|
||||
@@ -61,6 +62,7 @@ body > .container-fluid {
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
color: #444;
|
||||
min-width:300px;
|
||||
}
|
||||
|
||||
.hover {
|
||||
@@ -103,7 +105,10 @@ body > .container-fluid {
|
||||
}
|
||||
|
||||
#add-step-btn{
|
||||
margin-left: 10px;
|
||||
width: 100%
|
||||
}
|
||||
.selectize-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#addStep .labels {
|
||||
@@ -140,7 +145,6 @@ body > .container-fluid {
|
||||
#dwnld {
|
||||
max-width: 500px;
|
||||
margin: 20px auto;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#gif_element {
|
||||
|
||||
104
examples/demo.js
104
examples/demo.js
@@ -5,7 +5,7 @@ var defaultHtmlSequencerUi = require('./lib/defaultHtmlSequencerUi.js'),
|
||||
urlHash = require('./lib/urlHash.js'),
|
||||
insertPreview = require('./lib/insertPreview.js');
|
||||
|
||||
window.onload = function() {
|
||||
window.onload = function () {
|
||||
sequencer = ImageSequencer();
|
||||
|
||||
function refreshOptions() {
|
||||
@@ -62,7 +62,7 @@ window.onload = function() {
|
||||
sequencer.loadImage('images/tulips.png', ui.onLoad);
|
||||
}
|
||||
|
||||
var resetSequence = function(){
|
||||
var resetSequence = function () {
|
||||
var r = confirm('Do you want to reset the sequence?');
|
||||
if (r)
|
||||
window.location = '/';
|
||||
@@ -73,7 +73,7 @@ window.onload = function() {
|
||||
$('#resetButton').on('click', resetSequence);
|
||||
|
||||
//Module button radio selection
|
||||
$('.radio-group .radio').on('click', function() {
|
||||
$('.radio-group .radio').on('click', function () {
|
||||
$(this).parent().find('.radio').removeClass('selected');
|
||||
$(this).addClass('selected');
|
||||
newStep = $(this).attr('data-value');
|
||||
@@ -84,29 +84,44 @@ window.onload = function() {
|
||||
$(this).removeClass('selected');
|
||||
});
|
||||
|
||||
function displayMessageOnSaveSequence(){
|
||||
function displayMessageOnSaveSequence() {
|
||||
$('.savesequencemsg').fadeIn();
|
||||
setTimeout(function() {
|
||||
setTimeout(function () {
|
||||
$('.savesequencemsg').fadeOut();
|
||||
}, 1000);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
$('body').on('click', 'button.remove', ui.removeStepUi);
|
||||
$('#save-seq').click(() => {
|
||||
function saveSequence() { // 1. save seq
|
||||
var result = window.prompt('Please give a name to your sequence... (Saved sequence will only be available in this browser).');
|
||||
if(result){
|
||||
if (result) {
|
||||
result = result + ' (local)';
|
||||
sequencer.saveSequence(result, sequencer.toString());
|
||||
sequencer.saveSequence(result, sequencer.toString()); // 1.a study saveSequence
|
||||
sequencer.loadModules();
|
||||
displayMessageOnSaveSequence();
|
||||
refreshOptions();
|
||||
}
|
||||
}
|
||||
$('#saveButton').on('click', function () {
|
||||
// different handlers triggered for different dropdown options
|
||||
|
||||
let dropDownValue = $('#selectSaveOption option:selected').val();
|
||||
|
||||
if (dropDownValue == 'save-image') {
|
||||
$('.download-btn:last()').trigger('click');
|
||||
}
|
||||
else if (dropDownValue == 'save-gif') {
|
||||
handleSavePNG();
|
||||
}
|
||||
else if (dropDownValue == 'save-seq') {
|
||||
saveSequence();
|
||||
}
|
||||
});
|
||||
|
||||
var isWorkingOnGifGeneration = false;
|
||||
let isWorkingOnGifGeneration = false;
|
||||
|
||||
$('.js-view-as-gif').on('click', function(event) {
|
||||
// Prevent user from triggering generation multiple times
|
||||
$('.js-view-as-gif').on('click', function (event) {
|
||||
/* Prevent user from triggering generation multiple times*/
|
||||
if (isWorkingOnGifGeneration) return;
|
||||
|
||||
isWorkingOnGifGeneration = true;
|
||||
@@ -116,23 +131,10 @@ window.onload = function() {
|
||||
button.innerHTML = '<i class="fa fa-circle-o-notch fa-spin"></i>';
|
||||
|
||||
try {
|
||||
// Select all images from previous steps
|
||||
var imgs = document.getElementsByClassName('step-thumbnail');
|
||||
/* Get gif resources of previous steps */
|
||||
let options = getGifResources();
|
||||
|
||||
var imgSrcs = [];
|
||||
|
||||
for (var i = 0; i < imgs.length; i++) {
|
||||
imgSrcs.push(imgs[i].src);
|
||||
}
|
||||
|
||||
var options = {
|
||||
'gifWidth': imgs[0].width,
|
||||
'gifHeight': imgs[0].height,
|
||||
'images': imgSrcs,
|
||||
'frameDuration': 7,
|
||||
};
|
||||
|
||||
gifshot.createGIF(options, function(obj) {
|
||||
gifshot.createGIF(options, function (obj) { // gif generation
|
||||
if (!obj.error) {
|
||||
// Final gif encoded with base64 format
|
||||
var image = obj.image;
|
||||
@@ -141,13 +143,11 @@ window.onload = function() {
|
||||
animatedImage.id = 'gif_element';
|
||||
animatedImage.src = image;
|
||||
|
||||
let modal = $('#js-download-gif-modal');
|
||||
|
||||
var modal = $('#js-download-gif-modal');
|
||||
|
||||
$('#js-download-as-gif-button').one('click', function() {
|
||||
$('#js-download-as-gif-button').one('click', function () {
|
||||
// Trigger download
|
||||
download(image, 'index.gif', 'image/gif');
|
||||
|
||||
downloadGif(image);
|
||||
// Close modal
|
||||
modal.modal('hide');
|
||||
});
|
||||
@@ -175,10 +175,42 @@ window.onload = function() {
|
||||
button.disabled = false;
|
||||
button.innerHTML = 'View GIF';
|
||||
isWorkingOnGifGeneration = false;
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
function getGifResources() {
|
||||
/* Returns an object with specific gif options */
|
||||
let imgs = document.getElementsByClassName('step-thumbnail');
|
||||
var imgSrcs = [];
|
||||
|
||||
// Pushes image sources of all the modules in dom
|
||||
for (var i = 0; i < imgs.length; i++) {
|
||||
imgSrcs.push(imgs[i].src);
|
||||
}
|
||||
|
||||
var options = { // gif frame options
|
||||
'gifWidth': imgs[0].width,
|
||||
'gifHeight': imgs[0].height,
|
||||
'images': imgSrcs,
|
||||
'frameDuration': 7,
|
||||
};
|
||||
|
||||
return options;
|
||||
}
|
||||
|
||||
function handleSavePNG() {
|
||||
let options = getGifResources();
|
||||
gifshot.createGIF(options, function(obj){
|
||||
|
||||
downloadGif(obj.image);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function downloadGif(image) {
|
||||
download(image, 'index.gif', 'image/gif');// downloadjs library function
|
||||
}
|
||||
|
||||
// image selection and drag/drop handling from examples/lib/imageSelection.js
|
||||
sequencer.setInputStep({
|
||||
dropZoneSelector: '#dropzone',
|
||||
@@ -190,7 +222,7 @@ window.onload = function() {
|
||||
var util = intermediateHtmlStepUi(sequencer);
|
||||
step.output.src = reader.result;
|
||||
sequencer.run({ index: 0 });
|
||||
if(typeof step.options !== 'undefined')
|
||||
if (typeof step.options !== 'undefined')
|
||||
step.options.step.imgElement.src = reader.result;
|
||||
else
|
||||
step.imgElement.src = reader.result;
|
||||
@@ -201,7 +233,7 @@ window.onload = function() {
|
||||
var step = sequencer.steps[0];
|
||||
step.output.src = url;
|
||||
sequencer.run({ index: 0 });
|
||||
if(typeof step.options !== 'undefined')
|
||||
if (typeof step.options !== 'undefined')
|
||||
step.options.step.imgElement.src = url;
|
||||
else
|
||||
step.imgElement.src = url;
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<header class="text-center">
|
||||
<header class="text-center" style="min-width: 450px">
|
||||
<h1><a href="/" target='_blank' class="name-header">Image Sequencer</a></h1>
|
||||
<p>
|
||||
A pure JavaScript sequential image processing system, inspired by storyboards. Instead of modifying the original
|
||||
@@ -91,7 +91,7 @@
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
<p class="alert alert-success savesequencemsg">Saved Sequence Success. Sequence can be found among other modules.
|
||||
<p class="alert alert-success savesequencemsg">Saved Sequence Success. Sequence can be found among other modules in browser's localStorage.
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
@@ -139,15 +139,15 @@
|
||||
<p>Crop</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row center-align">
|
||||
<div class="col-md-8">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
|
||||
<select id="selectStep">
|
||||
<select id="selectStep" class="text-center">
|
||||
<!-- The default null selection has been appended manually in demo.js
|
||||
This is because the options in select are overritten when options are appended.-->
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="col-lg-4">
|
||||
<button class="btn btn-success btn-lg" name="add" id="add-step-btn">Add Step</button></div>
|
||||
</div>
|
||||
<div class="row center-align">
|
||||
@@ -188,10 +188,10 @@
|
||||
<div style="text-align:center;">
|
||||
<h2 style="margin-top:20px">Save</h2>
|
||||
<select class="form-control input-md" id="selectSaveOption" style="margin-top:20px">
|
||||
<option>Save as PNG</option>
|
||||
<option>Save as GIF (all steps)</option>
|
||||
<option>Save sequence</option>
|
||||
<option>Save sequence string</option>
|
||||
<option value="save-image">Save as PNG</option>
|
||||
<option value="save-gif">Save as GIF (all steps)</option>
|
||||
<option value="save-seq">Save sequence</option>
|
||||
<option value="save-seq-string">Save sequence string</option>
|
||||
</select>
|
||||
<p><button id="saveButton" class="btn btn-primary btn-lg save-button">Save</button></p>
|
||||
<p><button class="btn btn-default btn-lg js-view-as-gif" id="gif">Preview GIF</button></p>
|
||||
@@ -232,6 +232,7 @@
|
||||
var sequencer;
|
||||
})
|
||||
</script>
|
||||
<script async src="../node_modules/opencv.js/opencv.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
@@ -8,15 +8,14 @@
|
||||
// output values, step information.
|
||||
// See documetation for more details.
|
||||
|
||||
var intermediateHtmlStepUi = require('./intermediateHtmlStepUi.js'),
|
||||
const intermediateHtmlStepUi = require('./intermediateHtmlStepUi.js'),
|
||||
urlHash = require('./urlHash.js'),
|
||||
_ = require('lodash'),
|
||||
mapHtmlTypes = require('./mapHtmltypes'),
|
||||
scopeQuery = require('./scopeQuery'),
|
||||
$stepAll,
|
||||
$step;
|
||||
scopeQuery = require('./scopeQuery');
|
||||
|
||||
function DefaultHtmlStepUi(_sequencer, options) {
|
||||
let $step, $stepAll;
|
||||
|
||||
options = options || {};
|
||||
var stepsEl = options.stepsEl || document.querySelector('#steps');
|
||||
@@ -74,8 +73,10 @@ function DefaultHtmlStepUi(_sequencer, options) {
|
||||
|
||||
$step = scopeQuery.scopeSelector(step.ui);
|
||||
$stepAll = scopeQuery.scopeSelectorAll(step.ui);
|
||||
step.ui.$step = $step;
|
||||
step.ui.$stepAll = $stepAll;
|
||||
|
||||
step.linkElements = $stepAll('a');
|
||||
step.linkElements = step.ui.querySelectorAll('a');
|
||||
step.imgElement = $step('a img.img-thumbnail')[0];
|
||||
|
||||
if (_sequencer.modulesInfo().hasOwnProperty(step.name)) {
|
||||
@@ -180,7 +181,8 @@ function DefaultHtmlStepUi(_sequencer, options) {
|
||||
$('#steps .step-container:nth-last-child(1) .insert-step').prop('disabled', true);
|
||||
if($('#steps .step-container:nth-last-child(2)'))
|
||||
$('#steps .step-container:nth-last-child(2) .insert-step').prop('disabled', false);
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
stepsEl.insertBefore(step.ui, $(stepsEl).children()[stepOptions.index]);
|
||||
}
|
||||
}
|
||||
@@ -196,7 +198,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
|
||||
$(step.imgElement).on('click', (e) => {e.preventDefault(); });
|
||||
$stepAll('#color-picker').colorpicker();
|
||||
|
||||
function saveOptions(e) {
|
||||
function saveOptions(e) { // 1. SAVE OPTIONS
|
||||
e.preventDefault();
|
||||
if (optionsChanged){
|
||||
$step('div.details')
|
||||
@@ -268,7 +270,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
|
||||
$step('.load').hide();
|
||||
|
||||
step.imgElement.src = (step.name == 'load-image') ? step.output.src : step.output;
|
||||
var imgthumbnail = $step('.img-thumbnail');
|
||||
var imgthumbnail = $step('.img-thumbnail').getDomElem();
|
||||
for (let index = 0; index < step.linkElements.length; index++) {
|
||||
if (step.linkElements[index].contains(imgthumbnail))
|
||||
step.linkElements[index].href = step.imgElement.src;
|
||||
|
||||
@@ -23,7 +23,10 @@ function generatePreview(previewStepName, customValues, path, selector) {
|
||||
previewSequencer.addSteps(previewStepName, { [previewStepName]: customValues }).run(insertPreview);
|
||||
}
|
||||
}
|
||||
previewSequencer.loadImage(path, loadPreview);
|
||||
if(previewStepName === 'resize')
|
||||
insertPreview(path);
|
||||
else
|
||||
previewSequencer.loadImage(path, loadPreview);
|
||||
}
|
||||
|
||||
function updatePreviews(src, selector) {
|
||||
@@ -44,11 +47,30 @@ function updatePreviews(src, selector) {
|
||||
}
|
||||
};
|
||||
|
||||
Object.keys(previewSequencerSteps).forEach(function (step, index) {
|
||||
generatePreview(step, Object.values(previewSequencerSteps)[index], src, selector);
|
||||
});
|
||||
var img = new Image();
|
||||
img.onload = function(){
|
||||
var height = img.height;
|
||||
var width = img.width;
|
||||
|
||||
let percentage = (80 / height) * 100; //take the min resize value that fits the preview area => (new-width/orig_ht) - '80 as the preview area has 80*80 dimension
|
||||
percentage = Math.max((80 / width) * 100, percentage); // make sure that one dimension doesn't resize greater, leading distorting preview-area fitting
|
||||
percentage = Math.ceil(percentage);
|
||||
|
||||
var sequencer = ImageSequencer();
|
||||
|
||||
sequencer.loadImage(src, function(){
|
||||
this.addSteps('resize', {['resize']: percentage + '%'});
|
||||
this.run((src)=>{
|
||||
Object.keys(previewSequencerSteps).forEach(function (step, index) {
|
||||
generatePreview(step, Object.values(previewSequencerSteps)[index], src, selector);
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
img.src = src;
|
||||
}
|
||||
|
||||
|
||||
module.exports = {
|
||||
generatePreview : generatePreview,
|
||||
updatePreviews : updatePreviews
|
||||
|
||||
@@ -65,41 +65,33 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
|
||||
}
|
||||
|
||||
|
||||
function selectNewStepUi() {
|
||||
//var insertSelect = $step('.insert-step-select');
|
||||
var insertSelect = $(step.ui.querySelector('.insert-step-select'));
|
||||
function selectNewStepUi($step) {
|
||||
var insertSelect = $step('.insert-step-select');
|
||||
var m = insertSelect.val();
|
||||
// $step('.insertDiv .info').html(_sequencer.modulesInfo(m).description);
|
||||
// $step('.insertDiv .add-step-btn').prop('disabled', false);
|
||||
$(step.ui.querySelector('.insertDiv .info').html(_sequencer.modulesInfo(m).description));
|
||||
$(step.ui.querySelector('.insertDiv .add-step-btn').prop('disabled', false));
|
||||
$step('.insertDiv .info').html(_sequencer.modulesInfo(m).description);
|
||||
$step('.insertDiv .add-step-btn').prop('disabled', false);
|
||||
}
|
||||
|
||||
|
||||
var toggleDiv = function(callback = function(){}){
|
||||
/*$step('.insertDiv').collapse('toggle');
|
||||
var toggleDiv = function($step, callback = function(){}){
|
||||
$step('.insertDiv').collapse('toggle');
|
||||
if ($step('.insert-text').css('display') != 'none'){
|
||||
$step('.insert-text').fadeToggle(200, function(){$step('.no-insert-text').fadeToggle(200, callback)});*/
|
||||
|
||||
$(step.ui.querySelector('.insertDiv')).collapse('toggle');
|
||||
if ($(step.ui.querySelector('.insert-text')).css('display') != 'none'){
|
||||
$(step.ui.querySelector('.insert-text')).fadeToggle(200, function(){$(step.ui.querySelector('.no-insert-text')).fadeToggle(200, callback);});
|
||||
$step('.insert-text').fadeToggle(200, function(){$step('.no-insert-text').fadeToggle(200, callback);});
|
||||
}
|
||||
else {
|
||||
//$step('.no-insert-text').fadeToggle(200, function(){$step('.insert-text').fadeToggle(200, callback)});
|
||||
$(step.ui.querySelector('.no-insert-text')).fadeToggle(200, function(){$(step.ui.querySelector('.insert-text')).fadeToggle(200, callback);});
|
||||
$step('.no-insert-text').fadeToggle(200, function(){$step('.insert-text').fadeToggle(200, callback);});
|
||||
}
|
||||
};
|
||||
|
||||
insertStep = function (id) {
|
||||
const $step = step.ui.$step,
|
||||
$stepAll = step.ui.$stepAll;
|
||||
var modulesInfo = _sequencer.modulesInfo();
|
||||
var parser = new DOMParser();
|
||||
var addStepUI = stepUI();
|
||||
addStepUI = parser.parseFromString(addStepUI, 'text/html').querySelector('div');
|
||||
|
||||
//if ($step('.insertDiv').length > 0){
|
||||
if ($(step.ui.querySelector('.insertDiv')).length > 0){
|
||||
toggleDiv();
|
||||
if ($step('.insertDiv').length > 0){
|
||||
toggleDiv($step);
|
||||
}
|
||||
else {
|
||||
step.ui
|
||||
@@ -107,19 +99,14 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
|
||||
.insertAdjacentElement('afterend',
|
||||
addStepUI
|
||||
);
|
||||
toggleDiv(function(){
|
||||
toggleDiv($step, function(){
|
||||
insertPreview.updatePreviews(step.output, '.insertDiv');
|
||||
});
|
||||
}
|
||||
|
||||
/*$step('.insertDiv .close-insert-box').off('click').on('click', function(){toggleDiv(function(){})});
|
||||
$step('.insertDiv .close-insert-box').off('click').on('click', function(){toggleDiv(function(){});});
|
||||
|
||||
var insertStepSelect = $step('.insert-step-select');*/
|
||||
|
||||
$(step.ui.querySelector('.insertDiv .close-insert-box')).off('click').on('click', function(){toggleDiv(function(){});});
|
||||
|
||||
//var insertStepSelect = $step('.insert-step-select');
|
||||
var insertStepSelect = $(step.ui.querySelector('.insert-step-select'));
|
||||
var insertStepSelect = $step('.insert-step-select');
|
||||
insertStepSelect.html('');
|
||||
// Add modules to the insertStep dropdown
|
||||
for (var m in modulesInfo) {
|
||||
@@ -131,35 +118,30 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
|
||||
insertStepSelect.selectize({
|
||||
sortField: 'text'
|
||||
});
|
||||
//$step('.inserDiv .add-step-btn').prop('disabled', true);
|
||||
$(step.ui.querySelector('.inserDiv .add-step-btn')).prop('disabled', true);
|
||||
$step('.inserDiv .add-step-btn').prop('disabled', true);
|
||||
|
||||
insertStepSelect.append('<option value="" disabled selected>Select a Module</option>');
|
||||
//$step('.insertDiv .radio-group .radio').on('click', function () {
|
||||
$(step.ui.querySelector('.insertDiv .radio-group .radio')).on('click', function () {
|
||||
$step('.insertDiv .radio-group .radio').on('click', function () {
|
||||
$(this).parent().find('.radio').removeClass('selected');
|
||||
$(this).addClass('selected');
|
||||
newStep = $(this).attr('data-value');
|
||||
//$step('.insert-step-select').val(newStep);
|
||||
$(step.ui.querySelector('.insert-step-select')).val(newStep);
|
||||
selectNewStepUi();
|
||||
insert(id);
|
||||
$step('.insert-step-select').val(newStep);
|
||||
selectNewStepUi($step);
|
||||
insert(id, $step);
|
||||
$(this).removeClass('selected');
|
||||
});
|
||||
insertStepSelect.on('change', selectNewStepUi);
|
||||
//$step('.insertDiv .add-step-btn').on('click', function () { insert(id) });
|
||||
$(step.ui.querySelector('.insertDiv .add-step-btn')).on('click', function () { insert(id); });
|
||||
insertStepSelect.on('change', () => {selectNewStepUi($step);});
|
||||
$step('.insertDiv .add-step-btn').on('click', function () { insert(id, $step); });
|
||||
};
|
||||
|
||||
function insert(id) {
|
||||
function insert(id, $step) {
|
||||
|
||||
options = options || {};
|
||||
//var insertStepSelect = $step('.insert-step-select');
|
||||
var insertStepSelect = $(step.ui.querySelector('.insert-step-select'));
|
||||
var insertStepSelect = $step('.insert-step-select');
|
||||
if (insertStepSelect.val() == 'none') return;
|
||||
|
||||
var newStepName = insertStepSelect.val();
|
||||
toggleDiv();
|
||||
toggleDiv($step);
|
||||
var sequenceLength = 1;
|
||||
if (sequencer.sequences[newStepName]) {
|
||||
sequenceLength = sequencer.sequences[newStepName].length;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/**
|
||||
* @method $scope
|
||||
* @param {"DOMNode"} scope A DOM Node as the scope
|
||||
* @param {"DOMNode"} scope A DOM Node as the scope
|
||||
*/
|
||||
function $scope(scope) {
|
||||
return function(queryString){
|
||||
@@ -8,18 +8,22 @@ function $scope(scope) {
|
||||
|
||||
element.elem = function(queryString){
|
||||
return new $scope(scope)(queryString);
|
||||
}
|
||||
};
|
||||
element.elemAll = function(queryString){
|
||||
return new $scopeAll(scope)(queryString);
|
||||
}
|
||||
};
|
||||
element.getDomElem = function(i = 0){
|
||||
return element[i];
|
||||
};
|
||||
element.getScope = () => scope;
|
||||
|
||||
return element;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @method $scopeAll
|
||||
* @param {"DOMNode"} scope A DOM Node as the scope
|
||||
* @param {"DOMNode"} scope A DOM Node as the scope
|
||||
*/
|
||||
function $scopeAll(scope){
|
||||
return function(queryString){
|
||||
@@ -27,19 +31,23 @@ function $scopeAll(scope){
|
||||
|
||||
element.elem = function(queryString){
|
||||
return new $scope(scope)(queryString);
|
||||
}
|
||||
};
|
||||
element.elemAll = function(queryString){
|
||||
return new $scopeAll(scope)(queryString);
|
||||
}
|
||||
};
|
||||
element.getDomElem = function(i = 0){
|
||||
return element[i];
|
||||
};
|
||||
element.getScope = () => scope;
|
||||
|
||||
return element;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @method scopeSelector
|
||||
* @description A scoped jQuery selector
|
||||
* @param {"DOMNode"} scope DOM Node as the scope
|
||||
* @param {"DOMNode"} scope DOM Node as the scope
|
||||
*/
|
||||
function scopeSelector(scope){
|
||||
return $scope(scope);
|
||||
@@ -48,7 +56,7 @@ function scopeSelector(scope){
|
||||
/**
|
||||
* @method scopeSelectorAll
|
||||
* @description A scoped jQuery multiple selector
|
||||
* @param {"DOMNode} scope DOM Node as the scope
|
||||
* @param {"DOMNode} scope DOM Node as the scope
|
||||
*/
|
||||
function scopeSelectorAll(scope){
|
||||
return $scopeAll(scope);
|
||||
@@ -57,4 +65,4 @@ function scopeSelectorAll(scope){
|
||||
module.exports = {
|
||||
scopeSelector,
|
||||
scopeSelectorAll
|
||||
}
|
||||
};
|
||||
3146
package-lock.json
generated
3146
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
22
package.json
22
package.json
@@ -6,7 +6,7 @@
|
||||
"scripts": {
|
||||
"debug": "TEST=true node ./index.js -i ./examples/images/monarch.png -s invert",
|
||||
"test": "TEST=true istanbul cover tape test/core/*.js test/core/ui/user-interface.js test/core/modules/*.js | tap-spec; node test/core/sequencer/benchmark.js; browserify test/core/sequencer/meta-modules.js test/core/sequencer/image-sequencer.js test/core/sequencer/chain.js test/core/sequencer/replace.js test/core/sequencer/import-export.js test/core/sequencer/run.js test/core/sequencer/dynamic-imports.js test/core/util/*.js | tape-run --render=\"tap-spec\"",
|
||||
"test-ui": "node node_modules/jasmine/bin/jasmine test/ui/spec/*.js",
|
||||
"test-ui": "grunt browserify && grunt jasmine",
|
||||
"setup": "npm i && npm i -g grunt grunt-cli && grunt build",
|
||||
"start": "grunt serve"
|
||||
},
|
||||
@@ -30,14 +30,16 @@
|
||||
"url": "https://github.com/publiclab/image-sequencer/issues"
|
||||
},
|
||||
"dependencies": {
|
||||
"atob": "^2.1.2",
|
||||
"base64-img": "^1.0.4",
|
||||
"bootstrap": "~3.4.0",
|
||||
"bootstrap-colorpicker": "^2.5.3",
|
||||
"buffer": "~5.2.1",
|
||||
"commander": "^2.11.0",
|
||||
"buffer": "~5.4.0",
|
||||
"commander": "^3.0.1",
|
||||
"compressorjs": "^1.0.5",
|
||||
"data-uri-to-buffer": "^2.0.0",
|
||||
"downloadjs": "^1.4.7",
|
||||
"eslint": "^5.16.0",
|
||||
"eslint": "^6.1.0",
|
||||
"fisheyegl": "^0.1.2",
|
||||
"font-awesome": "~4.7.0",
|
||||
"geotiff": "^1.0.0-beta.6",
|
||||
@@ -47,6 +49,9 @@
|
||||
"gpu.js": "^2.0.0-rc.12",
|
||||
"image-sequencer-invert": "^1.0.0",
|
||||
"imagejs": "0.0.9",
|
||||
"imagemin": "^7.0.0",
|
||||
"imagemin-jpegtran": "^6.0.0",
|
||||
"imagemin-pngquant": "^8.0.0",
|
||||
"imgareaselect": "git://github.com/jywarren/imgareaselect.git#v1.0.0-rc.2",
|
||||
"istanbul": "^0.4.5",
|
||||
"jasmine": "^3.4.0",
|
||||
@@ -55,6 +60,7 @@
|
||||
"jsqr": "^1.1.1",
|
||||
"lodash": "^4.17.11",
|
||||
"ndarray": "^1.0.18",
|
||||
"opencv.js": "^1.2.1",
|
||||
"ora": "^3.0.0",
|
||||
"pace": "0.0.4",
|
||||
"puppeteer": "^1.14.0",
|
||||
@@ -62,6 +68,7 @@
|
||||
"readline-sync": "^1.4.7",
|
||||
"save-pixels": "~2.3.4",
|
||||
"selectize": "^0.12.6",
|
||||
"spawn-sync": "^2.0.0",
|
||||
"urify": "^2.1.1",
|
||||
"webgl-distort": "0.0.2"
|
||||
},
|
||||
@@ -71,20 +78,21 @@
|
||||
"@babel/plugin-syntax-object-rest-spread": "^7.2.0",
|
||||
"babelify": "^10.0.0",
|
||||
"browserify": "16.2.3",
|
||||
"eslint": "^5.16.0",
|
||||
"eslint": "^6.1.0",
|
||||
"grunt": "^1.0.3",
|
||||
"grunt-browser-sync": "^2.2.0",
|
||||
"grunt-browserify": "^5.0.0",
|
||||
"grunt-contrib-concat": "^1.0.1",
|
||||
"grunt-contrib-uglify-es": "^3.3.0",
|
||||
"grunt-contrib-watch": "^1.1.0",
|
||||
"husky": "^2.2.0",
|
||||
"grunt-contrib-jasmine": "~1.0.3",
|
||||
"husky": "^3.0.5",
|
||||
"image-filter-core": "~2.0.2",
|
||||
"image-filter-threshold": "~2.0.1",
|
||||
"jasmine-core": "^3.3.0",
|
||||
"jasmine-jquery": "^2.1.1",
|
||||
"jasmine-spec-reporter": "^4.2.1",
|
||||
"lint-staged": "^8.1.6",
|
||||
"lint-staged": "^9.1.0",
|
||||
"looks-same": "^7.0.0",
|
||||
"matchdep": "^2.0.0",
|
||||
"tap-spec": "^5.0.0",
|
||||
|
||||
@@ -4,6 +4,8 @@ require('./util/getStep.js');
|
||||
|
||||
ImageSequencer = function ImageSequencer(options) {
|
||||
|
||||
var str = require('./Strings.js')(this.steps, modulesInfo, addSteps, copy);
|
||||
|
||||
var sequencer = (this.name == 'ImageSequencer') ? this : this.sequencer;
|
||||
options = options || {};
|
||||
options.inBrowser = options.inBrowser === undefined ? isBrowser : options.inBrowser;
|
||||
@@ -256,8 +258,8 @@ ImageSequencer = function ImageSequencer(options) {
|
||||
fs.writeFileSync('./src/Modules.js', mods);
|
||||
}
|
||||
|
||||
function saveSequence(name, sequenceString) {
|
||||
const sequence = stringToJSON(sequenceString);
|
||||
function saveSequence(name, sequenceString) { // 4. save sequence
|
||||
const sequence = str.stringToJSON(sequenceString);
|
||||
// Save the given sequence string as a module
|
||||
if (options.inBrowser) {
|
||||
// Inside the browser we save the meta-modules using the Web Storage API
|
||||
@@ -282,7 +284,6 @@ ImageSequencer = function ImageSequencer(options) {
|
||||
this.sequences = require('./SavedSequences.json');
|
||||
}
|
||||
|
||||
var str = require('./Strings.js')(this.steps, modulesInfo, addSteps, copy);
|
||||
|
||||
return {
|
||||
//literals and objects
|
||||
|
||||
@@ -5,6 +5,7 @@ module.exports = {
|
||||
'add-qr': require('./modules/AddQR'),
|
||||
'average': require('./modules/Average'),
|
||||
'blend': require('./modules/Blend'),
|
||||
'blob-analysis': require('./modules/BlobAnalysis'),
|
||||
'blur': require('./modules/Blur'),
|
||||
'brightness': require('./modules/Brightness'),
|
||||
'canvas-resize': require('./modules/CanvasResize'),
|
||||
@@ -28,6 +29,7 @@ module.exports = {
|
||||
'gradient': require('./modules/Gradient'),
|
||||
'grid-overlay': require('./modules/GridOverlay'),
|
||||
'import-image': require('./modules/ImportImage'),
|
||||
'minify-image': require('./modules/MinifyImage'),
|
||||
'invert': require('image-sequencer-invert'),
|
||||
'ndvi': require('./modules/Ndvi'),
|
||||
'ndvi-colormap': require('./modules/NdviColormap'),
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
module.exports = exports = function (options, pixels, oldPixels, callback) {
|
||||
const pixelSetter = require('../../util/pixelSetter.js');
|
||||
|
||||
var QRCode = require('qrcode');
|
||||
QRCode.toDataURL(options.qrCodeString, function (err, url) {
|
||||
var getPixels = require('get-pixels');
|
||||
@@ -26,17 +28,11 @@ module.exports = exports = function (options, pixels, oldPixels, callback) {
|
||||
for (var m = 0; m < width; m++) {
|
||||
for (var n = 0; n < height; n++) {
|
||||
if (m >= xe && n >= ye) {
|
||||
pixels.set(m, n, 0, qrPixels.get(m - xe, n - ye, 0));
|
||||
pixels.set(m, n, 1, qrPixels.get(m - xe, n - ye, 1));
|
||||
pixels.set(m, n, 2, qrPixels.get(m - xe, n - ye, 2));
|
||||
pixels.set(m, n, 3, qrPixels.get(m - xe, n - ye, 3));
|
||||
pixelSetter(m, n, [qrPixels.get(m - xe, n - ye, 0), qrPixels.get(m - xe, n - ye, 1), qrPixels.get(m - xe, n - ye, 2), qrPixels.get(m - xe, n - ye, 3)], pixels);
|
||||
}
|
||||
|
||||
else {
|
||||
pixels.set(m, n, 0, oldPixels.get(m, n, 0));
|
||||
pixels.set(m, n, 1, oldPixels.get(m, n, 1));
|
||||
pixels.set(m, n, 2, oldPixels.get(m, n, 2));
|
||||
pixels.set(m, n, 3, oldPixels.get(m, n, 3));
|
||||
pixelSetter(m, n, [qrPixels.get(m, n, 0), qrPixels.get(m, n, 1), qrPixels.get(m, n, 2), qrPixels.get(m, n, 3)], pixels);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -16,6 +16,7 @@ module.exports = function Average(options, UI) {
|
||||
|
||||
// do the averaging
|
||||
function extraManipulation(pixels) {
|
||||
const $ = window.$;
|
||||
var i = 0, sum = [0, 0, 0, 0];
|
||||
while (i < pixels.data.length) {
|
||||
sum[0] += pixels.data[i++];
|
||||
|
||||
81
src/modules/BlobAnalysis/BlobAnalysis.js
Normal file
81
src/modules/BlobAnalysis/BlobAnalysis.js
Normal file
@@ -0,0 +1,81 @@
|
||||
module.exports = function(pixels, options, priorStep){
|
||||
|
||||
var $ = require('jquery'); // to make Blob-analysis work for node.js
|
||||
|
||||
var img = $(priorStep.imgElement);
|
||||
if(Object.keys(img).length === 0){
|
||||
img = $(priorStep.options.step.imgElement);
|
||||
}
|
||||
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.width = pixels.shape[0];
|
||||
canvas.height = pixels.shape[1];
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.drawImage(img[0], 0, 0);
|
||||
let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||
|
||||
|
||||
let src = cv.matFromImageData(imgData);
|
||||
let dst = new cv.Mat();
|
||||
let gray = new cv.Mat();
|
||||
let opening = new cv.Mat();
|
||||
let imageBg = new cv.Mat();
|
||||
let imageFg = new cv.Mat();
|
||||
let distTrans = new cv.Mat();
|
||||
let unknown = new cv.Mat();
|
||||
let markers = new cv.Mat();
|
||||
|
||||
// gray and threshold image
|
||||
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);
|
||||
cv.threshold(gray, gray, 0, 255, cv.THRESH_BINARY_INV + cv.THRESH_OTSU);
|
||||
|
||||
// get background
|
||||
let M = cv.Mat.ones(3, 3, cv.CV_8U);
|
||||
cv.erode(gray, gray, M);
|
||||
cv.dilate(gray, opening, M);
|
||||
cv.dilate(opening, imageBg, M, new cv.Point(-1, -1), 3);
|
||||
|
||||
// distance transform
|
||||
cv.distanceTransform(opening, distTrans, cv.DIST_L2, 5);
|
||||
cv.normalize(distTrans, distTrans, 1, 0, cv.NORM_INF);
|
||||
|
||||
// get foreground
|
||||
cv.threshold(distTrans, imageFg, 0.7 * 1, 255, cv.THRESH_BINARY);
|
||||
imageFg.convertTo(imageFg, cv.CV_8U, 1, 0);
|
||||
cv.subtract(imageBg, imageFg, unknown);
|
||||
|
||||
// get connected components markers
|
||||
cv.connectedComponents(imageFg, markers);
|
||||
for (let i = 0; i < markers.rows; i++) {
|
||||
for (let j = 0; j < markers.cols; j++) {
|
||||
markers.intPtr(i, j)[0] = markers.ucharPtr(i, j)[0] + 1;
|
||||
if (unknown.ucharPtr(i, j)[0] == 255) {
|
||||
markers.intPtr(i, j)[0] = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
cv.cvtColor(src, src, cv.COLOR_RGBA2RGB, 0);
|
||||
cv.watershed(src, markers);
|
||||
|
||||
// draw barriers
|
||||
for (let i = 0; i < markers.rows; i++) {
|
||||
for (let j = 0; j < markers.cols; j++) {
|
||||
if (markers.intPtr(i, j)[0] == -1) {
|
||||
src.ucharPtr(i, j)[0] = 255; // R
|
||||
src.ucharPtr(i, j)[1] = 0; // G
|
||||
src.ucharPtr(i, j)[2] = 0; // B
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
cv.imshow(canvas, src);
|
||||
|
||||
src.delete(); dst.delete(); gray.delete(); opening.delete(); imageBg.delete();
|
||||
imageFg.delete(); distTrans.delete(); unknown.delete(); markers.delete(); M.delete();
|
||||
|
||||
var myImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||
pixels.data = myImageData.data;
|
||||
|
||||
return pixels;
|
||||
};
|
||||
43
src/modules/BlobAnalysis/Module.js
Normal file
43
src/modules/BlobAnalysis/Module.js
Normal file
@@ -0,0 +1,43 @@
|
||||
|
||||
module.exports = function BlobAnalysis(options, UI){
|
||||
|
||||
var output;
|
||||
|
||||
function draw(input, callback, progressObj) {
|
||||
|
||||
progressObj.stop(true);
|
||||
progressObj.overrideFlag = true;
|
||||
|
||||
var step = this;
|
||||
|
||||
var priorStep = this.getStep(-1); // get the previous step to process it
|
||||
|
||||
function extraManipulation(pixels){
|
||||
|
||||
pixels = require('./BlobAnalysis')(pixels, options, priorStep);
|
||||
return pixels;
|
||||
}
|
||||
|
||||
function output(image, datauri, mimetype){
|
||||
|
||||
step.output = { src: datauri, format: mimetype};
|
||||
}
|
||||
|
||||
return require('../_nomodule/PixelManipulation.js')(input, {
|
||||
output: output,
|
||||
extraManipulation: extraManipulation,
|
||||
format: input.format,
|
||||
image: options.image,
|
||||
inBrowser: options.inBrowser,
|
||||
callback: callback
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
options: options,
|
||||
draw: draw,
|
||||
output: output,
|
||||
UI: UI
|
||||
};
|
||||
};
|
||||
4
src/modules/BlobAnalysis/index.js
Normal file
4
src/modules/BlobAnalysis/index.js
Normal file
@@ -0,0 +1,4 @@
|
||||
module.exports = [
|
||||
require('./Module'),
|
||||
require('./info.json')
|
||||
];
|
||||
6
src/modules/BlobAnalysis/info.json
Normal file
6
src/modules/BlobAnalysis/info.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"name": "Blob Analysis",
|
||||
"description": "Blob/Region identification for microscopic images.",
|
||||
"inputs": {},
|
||||
"docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md#blob-analysis"
|
||||
}
|
||||
@@ -1,4 +1,6 @@
|
||||
module.exports = exports = function(pixels, blur) {
|
||||
const pixelSetter = require('../../util/pixelSetter.js');
|
||||
|
||||
let kernel = kernelGenerator(blur),
|
||||
pixs = {
|
||||
r: [],
|
||||
@@ -24,9 +26,10 @@ module.exports = exports = function(pixels, blur) {
|
||||
|
||||
for (let y = 0; y < pixels.shape[1]; y++){
|
||||
for (let x = 0; x < pixels.shape[0]; x++){
|
||||
pixels.set(x, y, 0, Math.max(0, Math.min(conPix[0][y][x], 255)));
|
||||
pixels.set(x, y, 1, Math.max(0, Math.min(conPix[1][y][x], 255)));
|
||||
pixels.set(x, y, 2, Math.max(0, Math.min(conPix[2][y][x], 255)));
|
||||
var pixelvalue = [Math.max(0, Math.min(conPix[0][y][x], 255)),
|
||||
Math.max(0, Math.min(conPix[1][y][x], 255)),
|
||||
Math.max(0, Math.min(conPix[2][y][x], 255))];
|
||||
pixelSetter(x, y, pixelvalue, pixels);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -4,10 +4,10 @@
|
||||
module.exports = function canvasResize(options, UI) {
|
||||
|
||||
var defaults = require('./../../util/getDefaults.js')(require('./info.json'));
|
||||
const pixelSetter = require('../../util/pixelSetter.js');
|
||||
|
||||
var output;
|
||||
|
||||
|
||||
|
||||
function draw(input, callback, progressObj) {
|
||||
|
||||
options.width = parseInt(options.width || defaults.width);
|
||||
@@ -21,16 +21,15 @@ module.exports = function canvasResize(options, UI) {
|
||||
var step = this;
|
||||
|
||||
function extraManipulation(pixels) {
|
||||
|
||||
let newPixels = require('ndarray')(new Uint8Array(4 * options.width * options.height).fill(0), [options.width, options.height, 4]);
|
||||
let iMax = options.width - options.x,
|
||||
jMax = options.height - options.y;
|
||||
for (let i = 0; i < iMax && i < pixels.shape[0]; i++) {
|
||||
for (let j = 0; j < jMax && j < pixels.shape[1]; j++) {
|
||||
let x = i + options.x, y = j + options.y;
|
||||
newPixels.set(x, y, 0, pixels.get(i, j, 0));
|
||||
newPixels.set(x, y, 1, pixels.get(i, j, 1));
|
||||
newPixels.set(x, y, 2, pixels.get(i, j, 2));
|
||||
newPixels.set(x, y, 3, pixels.get(i, j, 3));
|
||||
pixelSetter(x, y, [pixels.get(i, j, 0), pixels.get(i, j, 1), pixels.get(i, j, 2), pixels.get(i, j, 3)], newPixels);
|
||||
|
||||
}
|
||||
}
|
||||
return newPixels;
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
module.exports = function ColorTemperature(options, UI) {
|
||||
|
||||
const pixelSetter = require('../../util/pixelSetter.js');
|
||||
|
||||
var output;
|
||||
|
||||
@@ -38,17 +40,12 @@ module.exports = function ColorTemperature(options, UI) {
|
||||
for (let i = 0; i < pixels.shape[0]; i++) {
|
||||
for (let j = 0; j < pixels.shape[1]; j++) {
|
||||
|
||||
r_data = pixels.get(i, j, 0);
|
||||
r_new_data = (255 / r) * r_data;
|
||||
pixels.set(i, j, 0, r_new_data);
|
||||
var rgbdata = [pixels.get(i, j, 0), pixels.get(i, j, 1), pixels.get(i, j, 2)];
|
||||
rgbdata[0] = (255 / r) * rgbdata[0];
|
||||
rgbdata[1] = (255 / g) * rgbdata[1];
|
||||
rgbdata[2] = (255 / b) * rgbdata[2];
|
||||
pixelSetter(i, j, rgbdata, pixels);
|
||||
|
||||
g_data = pixels.get(i, j, 1);
|
||||
g_new_data = (255 / g) * g_data;
|
||||
pixels.set(i, j, 1, g_new_data);
|
||||
|
||||
b_data = pixels.get(i, j, 2);
|
||||
b_new_data = (255 / b) * b_data;
|
||||
pixels.set(i, j, 2, b_new_data);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
var _ = require('lodash');
|
||||
const pixelSetter = require('../../util/pixelSetter.js');
|
||||
|
||||
module.exports = exports = function(pixels, contrast) {
|
||||
let oldpix = _.cloneDeep(pixels);
|
||||
@@ -10,37 +11,19 @@ module.exports = exports = function(pixels, contrast) {
|
||||
|
||||
for (let i = 0; i < pixels.shape[0]; i++) {
|
||||
for (let j = 0; j < pixels.shape[1]; j++) {
|
||||
var r = oldpix.get(i, j, 0) / 255.0;
|
||||
r -= 0.5;
|
||||
r *= contrast;
|
||||
r += 0.5;
|
||||
r *= 255;
|
||||
if (r < 0) r = 0;
|
||||
if (r > 255) r = 255;
|
||||
|
||||
|
||||
var g = oldpix.get(i, j, 1) / 255.0;
|
||||
g -= 0.5;
|
||||
g *= contrast;
|
||||
g += 0.5;
|
||||
g *= 255;
|
||||
if (g < 0) g = 0;
|
||||
if (g > 255) g = 255;
|
||||
|
||||
|
||||
var b = oldpix.get(i, j, 2) / 255.0;
|
||||
b -= 0.5;
|
||||
b *= contrast;
|
||||
b += 0.5;
|
||||
b *= 255;
|
||||
if (b < 0) b = 0;
|
||||
if (b > 255) b = 255;
|
||||
|
||||
|
||||
pixels.set(i, j, 0, r);
|
||||
pixels.set(i, j, 1, g);
|
||||
pixels.set(i, j, 2, b);
|
||||
|
||||
|
||||
var rgbarray = [oldpix.get(i, j, 0) / 255.0, oldpix.get(i, j, 1) / 255.0, oldpix.get(i, j, 2) / 255.0];
|
||||
for(var idx = 0;idx < 3;idx++){
|
||||
rgbarray[idx] -= 0.5;
|
||||
rgbarray[idx] *= contrast;
|
||||
rgbarray[idx] += 0.5;
|
||||
rgbarray[idx] *= 255;
|
||||
if (rgbarray[idx] < 0) rgbarray[idx] = 0;
|
||||
if (rgbarray[idx] > 255) rgbarray[idx] = 255;
|
||||
}
|
||||
|
||||
pixelSetter(i, j, rgbarray, pixels);
|
||||
|
||||
}
|
||||
}
|
||||
return pixels;
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
var _ = require('lodash');
|
||||
const pixelSetter = require('../../util/pixelSetter.js');
|
||||
|
||||
module.exports = exports = function(pixels, constantFactor, kernelValues, texMode) {
|
||||
let kernel = kernelGenerator(constantFactor, kernelValues),
|
||||
pixs = {
|
||||
@@ -24,9 +26,8 @@ module.exports = exports = function(pixels, constantFactor, kernelValues, texMod
|
||||
|
||||
for (let y = 0; y < pixels.shape[1]; y++){
|
||||
for (let x = 0; x < pixels.shape[0]; x++){
|
||||
pixels.set(x, y, 0, Math.max(0, Math.min(conPix[0][y][x], 255)));
|
||||
pixels.set(x, y, 1, Math.max(0, Math.min(conPix[1][y][x], 255)));
|
||||
pixels.set(x, y, 2, Math.max(0, Math.min(conPix[2][y][x], 255)));
|
||||
var value = [Math.max(0, Math.min(conPix[0][y][x], 255)), Math.max(0, Math.min(conPix[1][y][x], 255)), Math.max(0, Math.min(conPix[2][y][x], 255))];
|
||||
pixelSetter(x, y, value, pixels);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
module.exports = exports = function(pixels, options){
|
||||
var defaults = require('./../../util/getDefaults.js')(require('./info.json'));
|
||||
const pixelSetter = require('../../util/pixelSetter.js');
|
||||
|
||||
options.startingX = options.startingX || defaults.startingX;
|
||||
options.startingY = options.startingY || defaults.startingY;
|
||||
@@ -17,10 +18,8 @@ module.exports = exports = function(pixels, options){
|
||||
var drawSide = function(startX, startY, endX, endY){
|
||||
for (var n = startX; n <= endX + thickness; n++){
|
||||
for (var k = startY; k <= endY + thickness; k++){
|
||||
pixels.set(n, k, 0, color[0]);
|
||||
pixels.set(n, k, 1, color[1]);
|
||||
pixels.set(n, k, 2, color[2]);
|
||||
//pixels.set(n, k, 3, color[3]);
|
||||
|
||||
pixelSetter(n, k, color, pixels); //to remove 4th channel - pixels.set(n, k, 3, color[3]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
// Define kernels for the sobel filter
|
||||
|
||||
const pixelSetter = require('../../util/pixelSetter.js');
|
||||
const kernelx = [
|
||||
[-1, 0, 1],
|
||||
[-2, 0, 2],
|
||||
@@ -41,19 +43,14 @@ module.exports = function(pixels, highThresholdRatio, lowThresholdRatio, useHyst
|
||||
return pixels;
|
||||
};
|
||||
|
||||
|
||||
function supress(pixels, pixel) {
|
||||
pixels.set(pixel[0], pixel[1], 0, 0);
|
||||
pixels.set(pixel[0], pixel[1], 1, 0);
|
||||
pixels.set(pixel[0], pixel[1], 2, 0);
|
||||
pixels.set(pixel[0], pixel[1], 3, 255);
|
||||
pixelSetter(pixel[0], pixel[1], [0, 0, 0, 255], pixels);
|
||||
|
||||
}
|
||||
|
||||
function preserve(pixels, pixel) {
|
||||
pixels.set(pixel[0], pixel[1], 0, 255);
|
||||
pixels.set(pixel[0], pixel[1], 1, 255);
|
||||
pixels.set(pixel[0], pixel[1], 2, 255);
|
||||
pixels.set(pixel[0], pixel[1], 3, 255);
|
||||
pixelSetter(pixel[0], pixel[1], [255, 255, 255, 255], pixels);
|
||||
|
||||
}
|
||||
|
||||
// sobelFilter function that convolves sobel kernel over every pixel
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
module.exports = function flipImage(oldPixels, pixels, axis) {
|
||||
const pixelSetter = require('../../util/pixelSetter.js');
|
||||
|
||||
var width = oldPixels.shape[0],
|
||||
height = oldPixels.shape[1];
|
||||
|
||||
function copyPixel(x1, y1, x2, y2){
|
||||
pixels.set(x1, y1, 0, oldPixels.get(x2, y2, 0));
|
||||
pixels.set(x1, y1, 1, oldPixels.get(x2, y2, 1));
|
||||
pixels.set(x1, y1, 2, oldPixels.get(x2, y2, 2));
|
||||
pixels.set(x1, y1, 3, oldPixels.get(x2, y2, 3));
|
||||
pixelSetter(x1, y1, [oldPixels.get(x2, y2, 0), oldPixels.get(x2, y2, 1), oldPixels.get(x2, y2, 2), oldPixels.get(x2, y2, 3)], pixels);
|
||||
|
||||
}
|
||||
|
||||
function flip(){
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
module.exports = function Invert(options, UI) {
|
||||
const pixelSetter = require('../../util/pixelSetter.js');
|
||||
|
||||
var output;
|
||||
|
||||
// The function which is called on every draw.
|
||||
function draw(input, callback, progressObj) {
|
||||
function draw(input, callback) {
|
||||
|
||||
var getPixels = require('get-pixels');
|
||||
var savePixels = require('save-pixels');
|
||||
|
||||
@@ -21,10 +23,8 @@ module.exports = function Invert(options, UI) {
|
||||
for (var i = 0; i < pixels.shape[0]; i++) {
|
||||
for (var j = 0; j < pixels.shape[1]; j++) {
|
||||
let val = (i / width) * 255;
|
||||
pixels.set(i, j, 0, val);
|
||||
pixels.set(i, j, 1, val);
|
||||
pixels.set(i, j, 2, val);
|
||||
pixels.set(i, j, 3, 255);
|
||||
pixelSetter(i, j, [val, val, val, 255], pixels);
|
||||
|
||||
}
|
||||
}
|
||||
var chunks = [];
|
||||
|
||||
@@ -1,27 +1,31 @@
|
||||
module.exports = exports = function(pixels, options){
|
||||
var defaults = require('./../../util/getDefaults.js')(require('./info.json'));
|
||||
const pixelSetter = require('../../util/pixelSetter.js');
|
||||
|
||||
options.x = Number(options.x) || defaults.x;
|
||||
options.y = Number(options.y) || defaults.y;
|
||||
if(Number(options.x)==0){
|
||||
options.x = 1;
|
||||
}
|
||||
if( Number(options.y)==0) {
|
||||
options.y =1;
|
||||
}
|
||||
|
||||
options.x = Math.abs(Number(options.x)) || defaults.x;
|
||||
options.y = Math.abs(Number(options.y)) || defaults.y;
|
||||
color = options.color || defaults.color;
|
||||
color = color.substring(color.indexOf('(') + 1, color.length - 1); // extract only the values from rgba(_,_,_,_)
|
||||
color = color.split(',');
|
||||
|
||||
for(var x = 0; x < pixels.shape[0]; x += options.x){
|
||||
for(var y = 0 ; y < pixels.shape[1]; y++){
|
||||
pixels.set(x, y, 0, color[0]);
|
||||
pixels.set(x, y, 1, color[1]);
|
||||
pixels.set(x, y, 2, color[2]);
|
||||
//pixels.set(x, y, 3, color[3]);
|
||||
pixelSetter(x, y, color, pixels); // to remove 4th channel - pixels.set(x, y, 3, color[3]);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
for(var y = 0; y < pixels.shape[1]; y += options.y){
|
||||
for(var x = 0 ; x < pixels.shape[0]; x++){
|
||||
pixels.set(x, y, 0, color[0]);
|
||||
pixels.set(x, y, 1, color[1]);
|
||||
pixels.set(x, y, 2, color[2]);
|
||||
//pixels.set(x, y, 3, color[3]);
|
||||
pixelSetter(x, y, color, pixels); // to remove 4th channel - pixels.set(x, y, 3, color[3]);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -7,7 +7,9 @@ module.exports = function Channel(options, UI) {
|
||||
|
||||
function draw(input, callback, progressObj) {
|
||||
|
||||
var defaults = require('./../../util/getDefaults.js')(require('./info.json'));
|
||||
const defaults = require('./../../util/getDefaults.js')(require('./info.json'));
|
||||
const pixelSetter = require('../../util/pixelSetter.js');
|
||||
|
||||
options.gradient = options.gradient || defaults.gradient;
|
||||
options.gradient = JSON.parse(options.gradient);
|
||||
|
||||
@@ -32,10 +34,8 @@ module.exports = function Channel(options, UI) {
|
||||
|
||||
for (let x = 0; x < 256; x++) {
|
||||
for (let y = 0; y < 256; y++) {
|
||||
pixels.set(x, y, 0, 255);
|
||||
pixels.set(x, y, 1, 255);
|
||||
pixels.set(x, y, 2, 255);
|
||||
pixels.set(x, y, 3, 255);
|
||||
pixelSetter(x, y, [255, 255, 255, 255], pixels);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -43,9 +43,8 @@ module.exports = function Channel(options, UI) {
|
||||
if (options.gradient) {
|
||||
for (let x = 0; x < 256; x++) {
|
||||
for (let y = 0; y < 10; y++) {
|
||||
pixels.set(x, 255 - y, 0, x);
|
||||
pixels.set(x, 255 - y, 1, x);
|
||||
pixels.set(x, 255 - y, 2, x);
|
||||
pixelSetter(x, 255 - y, [x, x, x], pixels);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -56,9 +55,8 @@ module.exports = function Channel(options, UI) {
|
||||
let pixCount = Math.round(convfactor * hist[x]);
|
||||
|
||||
for (let y = startY; y < pixCount; y++) {
|
||||
pixels.set(x, 255 - y, 0, 204);
|
||||
pixels.set(x, 255 - y, 1, 255);
|
||||
pixels.set(x, 255 - y, 2, 153);
|
||||
pixelSetter(x, 255 - y, [204, 255, 153], pixels);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
102
src/modules/MinifyImage/Module.js
Normal file
102
src/modules/MinifyImage/Module.js
Normal file
@@ -0,0 +1,102 @@
|
||||
module.exports = function MinifyImage(options, UI) {
|
||||
var output;
|
||||
if (!options.inBrowser) {
|
||||
base64Img = require('base64-img');
|
||||
imagemin = require('imagemin');
|
||||
imageminJpegtran = require('imagemin-jpegtran');
|
||||
imageminPngquant = require('imagemin-pngquant');
|
||||
}
|
||||
|
||||
function draw(input, callback, progressObj) {
|
||||
progressObj.stop(true);
|
||||
progressObj.overrideFlag = true;
|
||||
|
||||
var step = this;
|
||||
|
||||
function dataURItoBlob(dataURI) {
|
||||
// convert base64 to raw binary data held in a string
|
||||
// doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
|
||||
var byteString = atob(dataURI.split(',')[1]);
|
||||
|
||||
// separate out the mime component
|
||||
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
|
||||
|
||||
// write the bytes of the string to an ArrayBuffer
|
||||
var ab = new ArrayBuffer(byteString.length);
|
||||
|
||||
// create a view into the buffer
|
||||
var ia = new Uint8Array(ab);
|
||||
|
||||
// set the bytes of the buffer to the correct values
|
||||
for (var i = 0; i < byteString.length; i++) {
|
||||
ia[i] = byteString.charCodeAt(i);
|
||||
}
|
||||
|
||||
// write the ArrayBuffer to a blob, and you're done
|
||||
var blob = new Blob([ab], {
|
||||
type: mimeString
|
||||
});
|
||||
return blob;
|
||||
|
||||
}
|
||||
if (options.inBrowser) {
|
||||
var Compressor = require('compressorjs');
|
||||
var blob = dataURItoBlob(input.src);
|
||||
new Compressor(blob, {
|
||||
quality: options.quality || 0.5,
|
||||
success(result) {
|
||||
var reader = new FileReader();
|
||||
reader.readAsDataURL(result);
|
||||
reader.onloadend = function () {
|
||||
base64data = reader.result;
|
||||
output(base64data, input.format);
|
||||
if (callback) callback();
|
||||
return;
|
||||
};
|
||||
|
||||
},
|
||||
error(err) {
|
||||
console.log(err.message);
|
||||
},
|
||||
});
|
||||
|
||||
}
|
||||
else{
|
||||
let filePath = __dirname + '/images/';
|
||||
var returnPath = base64Img.imgSync(input.src, filePath, 'test');
|
||||
(async () => {
|
||||
const files = await imagemin([returnPath], {
|
||||
destination: __dirname + '/results/',
|
||||
plugins: [
|
||||
imageminJpegtran(),
|
||||
imageminPngquant({
|
||||
quality: [0.6, 0.8]
|
||||
})
|
||||
]
|
||||
});
|
||||
var destPath = __dirname + '/results/test.' + input.format;
|
||||
var data = base64Img.base64Sync(destPath);
|
||||
output(data, input.format);
|
||||
if (callback) callback();
|
||||
})();
|
||||
}
|
||||
|
||||
|
||||
function output(datauri, mimetype) {
|
||||
|
||||
// This output is accessible by Image Sequencer
|
||||
step.output = {
|
||||
src: datauri,
|
||||
format: mimetype
|
||||
};
|
||||
}
|
||||
}
|
||||
return {
|
||||
options: options,
|
||||
draw: draw,
|
||||
output: output,
|
||||
UI: UI
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
4
src/modules/MinifyImage/index.js
Normal file
4
src/modules/MinifyImage/index.js
Normal file
@@ -0,0 +1,4 @@
|
||||
module.exports = [
|
||||
require('./Module'),
|
||||
require('./info.json')
|
||||
];
|
||||
14
src/modules/MinifyImage/info.json
Normal file
14
src/modules/MinifyImage/info.json
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "minify-image",
|
||||
"description": "Minifies the given image (Works for jpg/jpeg/webp images in browser)",
|
||||
"url": "https://github.com/publiclab/image-sequencer/tree/master/MODULES.md",
|
||||
"inputs": {
|
||||
"quality":{
|
||||
"type": "float",
|
||||
"desc": "quality aspect of the given image",
|
||||
"default": "0.5"
|
||||
}
|
||||
},
|
||||
"docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md#add-qr-module"
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ module.exports = exports = function(pixels, options) {
|
||||
|
||||
|
||||
let defaults = require('./../../util/getDefaults.js')(require('./info.json'));
|
||||
const pixelSetter = require('../../util/pixelSetter.js');
|
||||
|
||||
let fillColor = options.fillColor || defaults.fillColor,
|
||||
x = parseInt(options.startingX) || defaults.startingX,
|
||||
@@ -47,10 +48,8 @@ module.exports = exports = function(pixels, options) {
|
||||
} while (isSimilar(currx, south) && south < height);
|
||||
|
||||
for (n = north + 1; n < south; n += 1) {
|
||||
pixels.set(currx, n, 0, fillColor[0]);
|
||||
pixels.set(currx, n, 1, fillColor[1]);
|
||||
pixels.set(currx, n, 2, fillColor[2]);
|
||||
pixels.set(currx, n, 3, fillColor[3]);
|
||||
pixelSetter(currx, n, fillColor, pixels);
|
||||
|
||||
if (isSimilar(currx - 1, n)) {
|
||||
queuex.push(currx - 1);
|
||||
queuey.push(n);
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
module.exports = exports = function(pixels, options){
|
||||
const pixelSetter = require('../../util/pixelSetter.js');
|
||||
|
||||
var color = options.color || 'rgb(228,86,81)';
|
||||
color = color.substring(color.indexOf('(') + 1, color.length - 1); // extract only the values from rgba(_,_,_,_)
|
||||
|
||||
@@ -23,7 +25,6 @@ module.exports = exports = function(pixels, options){
|
||||
g >= cg * minFactor && g <= cg * maxFactor &&
|
||||
b >= cb * minFactor && b <= cb * maxFactor);
|
||||
}
|
||||
|
||||
for(var i = 0; i < pixels.shape[0]; i++){
|
||||
for(var j = 0; j < pixels.shape[1]; j++){
|
||||
var r = pixels.get(i, j, 0),
|
||||
@@ -32,16 +33,16 @@ module.exports = exports = function(pixels, options){
|
||||
if(isSimilar(r, g, b)){
|
||||
if (replaceMethod == 'greyscale'){
|
||||
var avg = (r + g + b) / 3;
|
||||
pixels.set(i, j, 0, avg);
|
||||
pixels.set(i, j, 1, avg);
|
||||
pixels.set(i, j, 2, avg);
|
||||
pixelSetter(i, j, [avg, avg, avg], pixels);
|
||||
|
||||
}else {
|
||||
pixels.set(i, j, 0, replaceColor[0]);
|
||||
pixels.set(i, j, 1, replaceColor[1]);
|
||||
pixels.set(i, j, 2, replaceColor[2]);
|
||||
pixelSetter(i, j, replaceColor, pixels);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
return pixels;
|
||||
};
|
||||
@@ -3,44 +3,36 @@ module.exports = function TextOverlay(options, UI) {
|
||||
|
||||
var output;
|
||||
|
||||
function draw(input, callback, progressObj) {
|
||||
|
||||
progressObj.stop(true);
|
||||
progressObj.overrideFlag = true;
|
||||
function draw(input, callback) {
|
||||
|
||||
var step = this;
|
||||
if (!options.step.inBrowser) { // This module is only for browser
|
||||
this.output = input;
|
||||
callback();
|
||||
|
||||
var priorStep = this.getStep(-1); // get the previous step to add text onto it.
|
||||
|
||||
function extraManipulation(pixels) {
|
||||
//if (options.step.inBrowser)
|
||||
pixels = require('./TextOverlay')(pixels, options, priorStep);
|
||||
return pixels;
|
||||
}
|
||||
else {
|
||||
var priorStep = this.getStep(-1); // get the previous step to add text onto it.
|
||||
|
||||
function extraManipulation(pixels) {
|
||||
//if (options.step.inBrowser)
|
||||
pixels = require('./TextOverlay')(pixels, options, priorStep);
|
||||
return pixels;
|
||||
}
|
||||
function output(image, datauri, mimetype) {
|
||||
|
||||
function output(image, datauri, mimetype) {
|
||||
|
||||
// This output is accesible by Image Sequencer
|
||||
step.output = { src: datauri, format: mimetype };
|
||||
|
||||
}
|
||||
|
||||
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
|
||||
});
|
||||
// This output is accesible by Image Sequencer
|
||||
step.output = { src: datauri, format: mimetype };
|
||||
|
||||
}
|
||||
|
||||
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 {
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
module.exports = exports = function(pixels, options, priorstep){
|
||||
|
||||
var $ = require('jquery'); // to make text-overlay work for node.js
|
||||
|
||||
var defaults = require('./../../util/getDefaults.js')(require('./info.json'));
|
||||
|
||||
options.text = options.text || defaults.text;
|
||||
|
||||
@@ -40,6 +40,5 @@
|
||||
"desc": "Enter the font size in pixels.",
|
||||
"default": "12"
|
||||
}
|
||||
},
|
||||
"only": "browser"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,6 +5,9 @@
|
||||
module.exports = function PixelManipulation(image, options) {
|
||||
// To handle the case where pixelmanipulation is called on the input object itself
|
||||
// like input.pixelManipulation(options)
|
||||
|
||||
const pixelSetter = require('../../util/pixelSetter.js');
|
||||
|
||||
if (arguments.length <= 1) {
|
||||
options = image;
|
||||
image = this;
|
||||
@@ -86,10 +89,8 @@ module.exports = function PixelManipulation(image, options) {
|
||||
y
|
||||
);
|
||||
|
||||
pixels.set(x, y, 0, pixel[0]);
|
||||
pixels.set(x, y, 1, pixel[1]);
|
||||
pixels.set(x, y, 2, pixel[2]);
|
||||
pixels.set(x, y, 3, pixel[3]);
|
||||
pixelSetter(x, y, pixel, pixels);
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
5
src/util/pixelSetter.js
Normal file
5
src/util/pixelSetter.js
Normal file
@@ -0,0 +1,5 @@
|
||||
module.exports = function(x, y, value, pixels){
|
||||
for(let i = 0; i < value.length; i++){
|
||||
pixels.set(x, y, i, value[i]);
|
||||
}
|
||||
};
|
||||
32
test/core/modules/minify-image.js
Normal file
32
test/core/modules/minify-image.js
Normal file
@@ -0,0 +1,32 @@
|
||||
const dataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEX+AAD///+KQee0AAAAAWJLR0QB/wIt3gAAAAd0SU1FB+EGHRIVAvrm6EMAAAAMSURBVAjXY2AgDQAAADAAAceqhY4AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTctMDYtMjlUMTg6MjE6MDIrMDI6MDDGD83DAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE3LTA2LTI5VDE4OjIxOjAyKzAyOjAwt1J1fwAAAABJRU5ErkJggg==';
|
||||
console.log(dataURI);
|
||||
const ImageSequencer = require('../../../src/ImageSequencer');
|
||||
const test = require('tape');
|
||||
var atob = require('atob');
|
||||
|
||||
var sequencer = ImageSequencer();
|
||||
var base64str = dataURI.substr(22);
|
||||
var decoded = atob(base64str);
|
||||
|
||||
|
||||
var initialSize = decoded.length;
|
||||
|
||||
|
||||
sequencer.loadImage(dataURI, function(){
|
||||
this.addSteps('minify-image');
|
||||
});
|
||||
|
||||
|
||||
test('minify-image minifies the image', t => {
|
||||
sequencer.run(function callback(out){
|
||||
console.log(out);
|
||||
var base64str = out.substr(22);
|
||||
var decoded = atob(base64str);
|
||||
var miniifiedSize = decoded.length;
|
||||
var isLess = miniifiedSize < initialSize;
|
||||
t.equal(isLess, true, 'image minified');
|
||||
t.end();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
21
test/ui/spec/basicUi.spec.js
Normal file
21
test/ui/spec/basicUi.spec.js
Normal file
@@ -0,0 +1,21 @@
|
||||
describe('Default sequencer HTML', function() {
|
||||
|
||||
beforeAll(function() {
|
||||
jasmine.getFixtures().fixturesPath = 'test/ui/spec/fixtures';
|
||||
fixture = loadFixtures('index.html');
|
||||
});
|
||||
|
||||
it('adds a step from the quick selector', function() {
|
||||
expect($('.step').length).toBe(1);
|
||||
expect($('.step:first img')[0].src).not.toBeUndefined();
|
||||
expect($('.step:first img')[0].src).not.toBe('');
|
||||
// needs more setup
|
||||
$("[data-value='brightness']").click()
|
||||
expect($('.step').length).toBe(2);
|
||||
expect($('.step:last img')[0].src).not.toBeUndefined();
|
||||
expect($('.step:last img')[0].src).not.toBe('');
|
||||
expect($('.step:last img')[0].src).not.toEqual($('.step:first img')[0].src);
|
||||
// TODO: test the actual `src` attribute of $('.step:last img') against a known value
|
||||
});
|
||||
|
||||
});
|
||||
@@ -39,4 +39,5 @@ describe('Default sequencer HTML', function() {
|
||||
it('import options from url', function() {
|
||||
expect(defaultHtmlSequencerUi.importStepsFromUrlHash).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
187
test/ui/spec/fixtures/index.html
vendored
Normal file
187
test/ui/spec/fixtures/index.html
vendored
Normal file
@@ -0,0 +1,187 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF8">
|
||||
<link rel="manifest" href="manifest.json">
|
||||
|
||||
<title>Image Sequencer</title>
|
||||
|
||||
<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
|
||||
<script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<script src="../../src/ui/prepareDynamic.js"></script>
|
||||
<script src="../../dist/image-sequencer.js" charset="utf-8"></script>
|
||||
<script src="../../dist/image-sequencer-ui.js" charset="utf-8"></script>
|
||||
<script src="../../node_modules/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js"></script>
|
||||
<!-- for crop module: -->
|
||||
<script src="../../node_modules/imgareaselect/jquery.imgareaselect.dev.js"></script>
|
||||
<script src="../../node_modules/gifshot/dist/gifshot.min.js" type="text/javascript"></script>
|
||||
|
||||
<!-- Download.js for large files -->
|
||||
<script src="../../node_modules/downloadjs/download.min.js" type="text/javascript" />
|
||||
|
||||
<script src="../../examples/lib/scrollToTop.js"></script>
|
||||
<script src="../../node_modules/selectize/dist/js/standalone/selectize.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../../node_modules/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../../examples/demo.css">
|
||||
<link href="../../node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="../../node_modules/selectize/dist/css/selectize.default.css" rel="stylesheet">
|
||||
<!-- for crop module: -->
|
||||
<link href="../../node_modules/imgareaselect/distfiles/css/imgareaselect-default.css" rel="stylesheet">
|
||||
<link href="../../examples/selectize.default.css" rel="stylesheet">
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div id="dropzone" class="dropzone">
|
||||
<p>
|
||||
<i>Select or drag in an image to start!</i>
|
||||
</p>
|
||||
<center>
|
||||
<input type="file" id="fileInput" value="" accept="image/*"><br />
|
||||
<button type="button" id="take-photo" class="btn btn-primary btn-block btn-lg ">Take a Photo</button>
|
||||
<video id="video" width="100%" height="100%" style="display:none"></video>
|
||||
<a href="#" id="capture" style="display:none" class="btn btn-primary btn-md">Click Picture</a>
|
||||
<a href="#" id="close" style="display:none" class="btn btn-default btn-md">Close</a>
|
||||
<canvas id="canvas" width="400" height="300" style="display:none"></canvas>
|
||||
</center>
|
||||
</div>
|
||||
|
||||
<section id="steps" class="row">
|
||||
<div id="load-image"></div>
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
<p class="alert alert-success savesequencemsg">Saved Sequence Success. Sequence can be found among other modules in browser's localStorage.
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<section id="addStep" class="panel panel-primary">
|
||||
<div class="form-inline">
|
||||
<div class="panel-body">
|
||||
<div style="display:flex; justify-content:center;">
|
||||
</div>
|
||||
<p class="info">Select a new module to add to your sequence.</p>
|
||||
<div class="row center-align radio-group">
|
||||
<div>
|
||||
<div class="radio" data-value="resize">
|
||||
<i class="fa fa-arrows-alt fa-4x i-over"></i>
|
||||
</div>
|
||||
<p>Resize</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="radio" data-value="brightness">
|
||||
<i class="fa fa-sun-o fa-4x i-over"></i>
|
||||
</div>
|
||||
<p>Brightness</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="radio" data-value="contrast">
|
||||
<i class="fa fa-adjust fa-4x i-over"></i>
|
||||
</div>
|
||||
<p>Contrast</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="radio" data-value="saturation">
|
||||
<i class="fa fa-tint fa-4x i-over i-small"></i>
|
||||
</div>
|
||||
<p>Saturation</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="radio" data-value="rotate">
|
||||
<i class="fa fa-rotate-right fa-4x i-over"></i>
|
||||
</div>
|
||||
<p>Rotate</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="radio" data-value="crop">
|
||||
<i class="fa fa-crop fa-4x i-over"></i>
|
||||
</div>
|
||||
<p>Crop</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
|
||||
<select id="selectStep" class="text-center">
|
||||
<!-- The default null selection has been appended manually in demo.js
|
||||
This is because the options in select are overritten when options are appended.-->
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<button class="btn btn-success btn-lg" name="add" id="add-step-btn">Add Step</button></div>
|
||||
</div>
|
||||
<div class="row center-align">
|
||||
<button id="resetButton" class="btn btn-default btn-lg"
|
||||
style=" margin: 20px 35px 0px 35px; width:100%;">Clear All Steps</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="modal fade" id="js-download-gif-modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
|
||||
aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">Your gif is ready</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="js-download-modal-gif-container">
|
||||
<!-- Gif should appear here -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>
|
||||
|
||||
<button id="js-download-as-gif-button" class="btn btn-primary">Download</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<section id="dwnld" class="panel panel-primary">
|
||||
<div class="form-inline">
|
||||
<div class="panel-body">
|
||||
<div style="text-align:center;">
|
||||
<h2 style="margin-top:20px">Save</h2>
|
||||
<select class="form-control input-md" id="selectSaveOption" style="margin-top:20px">
|
||||
<option value="save-image">Save as PNG</option>
|
||||
<option value="save-gif">Save as GIF (all steps)</option>
|
||||
<option value="save-seq">Save sequence</option>
|
||||
<option value="save-seq-string">Save sequence string</option>
|
||||
</select>
|
||||
<p><button id="saveButton" class="btn btn-primary btn-lg save-button">Save</button></p>
|
||||
<p><button class="btn btn-default btn-lg js-view-as-gif" id="gif">Preview GIF</button></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<center><button class="btn btn-default btn-sm" id="clear-cache">Clear offline cache</button></center>
|
||||
</footer>
|
||||
|
||||
<button id="move-up"><i class="fa fa-arrow-circle-o-up"></i></button>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
var sequencer;
|
||||
})
|
||||
</script>
|
||||
<script async src="../../node_modules/opencv.js/opencv.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,10 +1,15 @@
|
||||
{
|
||||
"spec_dir": "test/spec",
|
||||
"spec_dir": "test/ui/spec",
|
||||
"spec_files": [
|
||||
"**/*.[sS]pec.js"
|
||||
],
|
||||
"helpers": [
|
||||
"helpers/**/*.js"
|
||||
"helpers/**/*.js",
|
||||
"../../../node_modules/jquery/dist/jquery.min.js",
|
||||
"../../../node_modules/bootstrap/dist/js/bootstrap.min.js",
|
||||
"../../../node_modules/jasmine-jquery/lib/jasmine-jquery.js",
|
||||
"../../../dist/image-sequencer.js",
|
||||
"../../../dist/image-sequencer-ui.js"
|
||||
],
|
||||
"stopSpecOnExpectationFailure": false,
|
||||
"random": false
|
||||
|
||||
Reference in New Issue
Block a user