Launch Week Day 1: Socket for Jira Is Now Available.Learn More →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

image-filter-grayscale

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

image-filter-grayscale - npm Package Compare versions

Comparing version
0.0.10
 to
1.0.0
+40
contributing.json
// https://gitmagic.io/rules
{
"commit": {
"subject_cannot_be_empty": true,
"subject_must_be_longer_than": 4,
"subject_must_be_shorter_than": 101,
"subject_lines_must_be_shorter_than": 51,
"subject_must_be_single_line": true,
"subject_must_be_in_tense": "imperative",
"subject_must_start_with_case": "lower",
"subject_must_not_end_with_dot": true,
"body_lines_must_be_shorter_than": 73
},
"pull_request": {
"subject_cannot_be_empty": true,
"subject_must_be_longer_than": 4,
"subject_must_be_shorter_than": 101,
"subject_must_be_in_tense": "imperative",
"subject_must_start_with_case": "upper",
"subject_must_not_end_with_dot": true,
"body_cannot_be_empty": true,
"body_must_include_verification_steps": true,
"body_must_include_screenshot": ["html", "css"]
},
"issue": {
"subject_cannot_be_empty": true,
"subject_must_be_longer_than": 4,
"subject_must_be_shorter_than": 101,
"subject_must_be_in_tense": "imperative",
"subject_must_start_with_case": "upper",
"subject_must_not_end_with_dot": true,
"body_cannot_be_empty": true,
"body_must_include_reproduction_steps": ["bug"],
"label_must_be_set": true
}
}
+18
src/transform.js
/**
* Iterate over the array applying the grayscale transformation
* @name transform
* @param {Object} data
* @param {Number} length
*/
module.exports = function transform(data, length) {
for (var i = 0; i < length; i += 4) {
var r = data[i];
var g = data[i + 1];
var b = data[i + 2];
// CIE luminance for the RGB
// The human eye is bad at seeing red and blue, so we de-emphasize them.
var v = 0.2126 * r + 0.7152 * g + 0.0722 * b;
data[i] = data[i + 1] = data[i + 2] = v;
}
};
+22
tests/transform-spec.js
const expect = require('chai').expect;
const transform = require('../src/transform');
describe('transform', function () {
it('should apply transformation and return as imageData', function () {
const data = [
193,
219,
242,
255,
193,
219,
242,
255
];
const expectedData = [215.13299999999998, 215.13299999999998, 215.13299999999998, 255, 193, 219, 242, 255];
transform(data, 4);
expect(data).to.deep.equal(expectedData);
});
});
+5
-3
.eslintrc
{
"extends": "eslint:recommended",
"env": {
"es6": true,
"browser": true,
"node": true

@@ -15,3 +15,3 @@ },

"no-console": 0,
"no-console": "off",
},

@@ -21,4 +21,6 @@ "globals": {

"context": true,
"it": true
"it": true,
"beforeEach": true,
"afterEach": true
}
}
+1
-1
.nvmrc

@@ -1,1 +0,1 @@

5.1
6
+2
-1
.travis.yml
language: node_js
node_js:
- "5.1"
- "4"
- "6"
after_script:
- npm run codecov
+1
-3
karma.conf.js
var istanbul = require('istanbul');
var bistanbul = require('browserify-babel-istanbul');
var babelify = require('babelify');
var bistanbul = require('browserify-istanbul');

@@ -45,3 +44,2 @@ module.exports = function (config) {

transform: [
babelify,
bistanbul({

@@ -48,0 +46,0 @@ instrumenterConfig: {

+7
-14
package.json
{
"name": "image-filter-grayscale",
"version": "0.0.10",
"version": "1.0.0",
"description": "Small library to apply a grayscale transformation to a image",
"main": "src/index.js",
"scripts": {
"build": "browserify -t babelify sandbox/sandbox.js > sandbox/bundle.js",
"eslint": "eslint src/**/*.js",
"build": "npm run eslint && browserify sandbox/sandbox.js > sandbox/bundle.js",
"test": "./node_modules/.bin/karma start",

@@ -33,9 +34,7 @@ "codecov": "cat coverage/*/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js",

"devDependencies": {
"babel-polyfill": "^6.9.0",
"babelify": "^7.2.0",
"browserify": "^13.0.0",
"browserify-babel-istanbul": "^0.4.0",
"browserify": "^13.1.1",
"browserify-istanbul": "^2.0.0",
"chai": "^3.5.0",
"codecov.io": "^0.1.6",
"eslint": "^3.12.2",
"eslint": "^3.13.0",
"http-server": "^0.9.0",

@@ -55,10 +54,4 @@ "istanbul": "^0.4.3",

"dependencies": {
"babel-preset-es2015": "^6.5.0",
"image-filter-core": "latest"
},
"browserify": {
"transform": [
"babelify"
]
"image-filter-core": "^2.0.0"
}
}
+28
-16
README.md
![build status](https://travis-ci.org/canastro/image-filter-grayscale.svg?branch=master)
[![npm version](https://badge.fury.io/js/image-filter-grayscale.svg)](https://badge.fury.io/js/image-filter-grayscale)
[![codecov](https://codecov.io/gh/canastro/image-filter-grayscale/branch/master/graph/badge.svg)](https://codecov.io/gh/canastro/image-filter-grayscale)
# image-filter-grayscale
Small library to apply a grayscale transformation to a image.
Small library to apply a grayscale transformation to a image relying on `image-filter-core` handle the transformation and distribute work with webworkers.
Other related modules:
* [image-filter-core](https://www.npmjs.com/package/image-filter-core)
* [image-filter-contrast](https://www.npmjs.com/package/image-filter-contrast)
* [image-filter-grayscale](https://www.npmjs.com/package/image-filter-grayscale)
* [image-filter-threshold](https://www.npmjs.com/package/image-filter-threshold)
* [image-filter-sepia](https://www.npmjs.com/package/image-filter-sepia)
* [image-filter-invert](https://www.npmjs.com/package/image-filter-invert)
* [image-filter-gamma](https://www.npmjs.com/package/image-filter-gamma)
* [image-filter-colorize](https://www.npmjs.com/package/image-filter-colorize)
* [image-filters](https://www.npmjs.com/package/image-filters)
## Install

@@ -17,14 +29,13 @@

The default operation of this library is to consume imageData and return transformed imageData, but to facilitate a bit you can pass `asDataURL` as true to return a dataURL that you can inject into a image tag.
This library consumes ImageData and outputs ImageData in a Promise. You can use `image-filter-core` to convert from ImageData to dataURL.
JS file:
```js
var imageGrayscale = require('image-filter-grayscale');
var imageGrayscale = require('image-grayscale');
var nWorkers = 4;
var result = imageGrayscale({
data: IMAGE_DATA,
asDataURL: true //if you want data to data transformation you don't need to include this
});
imageGrayscale(IMAGE_DATA, 4);
```
# Frequent questions:
## Frequent questions:
### How can I get image data from a image tag?

@@ -51,11 +62,12 @@

```js
var result = imageGrayscale({
data: IMAGE_DATA
});
var imageFilterCore = require('image-filter-core');
var nWorkers = 4;
var image = document.createElement('img');
image.setAttribute('src', result);
var target = document.getElementById('#dummy-target');
target.appendChild(image);
imageGrayscale(IMAGE_DATA, nWorkers)
.then(function (result) {
// result === ImageData object
var image = document.createElement('img');
image.setAttribute('src', imageFilterCore.convertImageDataToCanvasURL(imageData));
target.appendChild(image);
});
```
+16
-20
sandbox/sandbox.js

@@ -1,11 +0,8 @@

import imageGrayscale from '../src/index';
var imageFilterCore = require('image-filter-core');
var imageGrayscale = require('../src/index');
function applyResults(selector, src) {
var target;
var image;
target = document.querySelectorAll(selector)[0];
image = document.createElement('img');
image.setAttribute('src', src);
function applyResults(selector, canvas, context, src) {
var target = document.querySelectorAll(selector)[0];
var image = document.createElement('img');
image.setAttribute('src', imageFilterCore.convertImageDataToCanvasURL(src));
target.appendChild(image);

@@ -15,20 +12,19 @@ }

window.onload = function () {
const img = new Image;
img.onload = () => {
const canvas = document.createElement('canvas');
var img = new Image;
img.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const context = canvas.getContext('2d');
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
const data = context.getImageData(0, 0, img.width, img.height);
var data = context.getImageData(0, 0, img.width, img.height);
imageGrayscale({
data: data
}).then((results) => {
applyResults('#target-1', results);
});
imageGrayscale(data)
.then(function (results) {
applyResults('#target-1', canvas, context, results);
});
};
img.src = 'dummy.jpg';
};
+9
-30
src/index.js

@@ -1,37 +0,16 @@

import worker from './worker';
import { apply, getCanvas } from 'image-filter-core';
var imageFilterCore = require('image-filter-core');
var transform = require('./transform');
/**
* @name grayscale
* @param {object} options
* @param {string} options.data - data of a image extracted from a canvas
* @param {string} options.nWorkers - number of workers
* @param {bool} options.asDataURL
* @returns {promise}
* @param {ImageData} data - data of a image extracted from a canvas
* @param {Number} nWorkers - number of workers
* @returns {Promise}
*/
export default function grayscale(options) {
if (!options.data) {
module.exports = function grayscale(data, nWorkers) {
if (!data) {
throw new Error('image-filter-grayscale:: invalid options provided');
}
const nWorkers = options.nWorkers || 4;
const canvas = getCanvas(options.data.width, options.data.height);
const context = canvas.getContext('2d');
// Drawing the source image into the target canvas
context.putImageData(options.data, 0, 0);
const len = canvas.width * canvas.height * 4;
const segmentLength = len / nWorkers; // This is the length of array sent to the worker
const blockSize = canvas.height / nWorkers; // Height of the picture chunck for every worker
return apply(
worker,
nWorkers,
canvas,
context,
null,
blockSize,
segmentLength
);
}
return imageFilterCore.apply(data, transform, nWorkers);
};
+30
-30
tests/index-spec.js

@@ -1,13 +0,12 @@

import sinon from 'sinon';
import { expect } from 'chai';
import * as utils from 'image-filter-core';
import imageBrightness from '../src/index';
import 'babel-polyfill';
const sinon = require('sinon');
const expect = require('chai').expect;
const imageFilterCore = require('image-filter-core');
const imageFilterGrayscale = require('../src/index');
describe('index', () => {
describe('index', function() {
var sandbox;
var canvas;
var context;
var ctx;
beforeEach(() => {
beforeEach(function() {
// Create a sandbox for the test

@@ -17,3 +16,3 @@ sandbox = sinon.sandbox.create();

afterEach(() => {
afterEach(function() {
// Restore all the things made through the sandbox

@@ -23,4 +22,4 @@ sandbox.restore();

beforeEach(() => {
context = {
beforeEach(function() {
ctx = {
getImageData: sandbox.stub(),

@@ -33,32 +32,33 @@ putImageData: sandbox.stub()

height: 150,
getContext: sandbox.stub().returns(context)
getContext: sandbox.stub().returns(ctx)
};
sandbox.stub(utils, 'getCanvas').returns(canvas);
sandbox.stub(imageFilterCore, 'getCanvas').returns(canvas);
});
it('should throw error by missing parameters', () => {
const fn = () => {
imageBrightness({});
};
context('when no data is provided', function () {
it('should throw error by missing parameters', function () {
function fn() {
imageFilterGrayscale();
};
expect(fn).to.throw(/image-filter-grayscale:: invalid options provided/);
expect(fn).to.throw(/image-filter-grayscale:: invalid options provided/);
});
});
it.skip('should apply transformation and return as imageData', () => {
var imageData = {
data: [193, 219, 242, 255]
};
context('when all required parameters are provided', function () {
it('should apply transformation and return as imageData', function (done) {
var imageData = {
data: [193, 219, 242, 255]
};
// const expectedData = {
// data: [224.34440379022422, 262.88216530631394, 296.9732620320856, 255]
// };
sandbox.stub(imageFilterCore, 'apply', function () { return Promise.resolve(); });
imageBrightness({
data: imageData,
brightness: 50
}).then((result) => {
console.log(result);
imageFilterGrayscale(imageData, { adjustment: 10 }, 4)
.then(function (result) {
expect(imageFilterCore.apply.calledOnce).to.equal(true);
done();
});
});
});
});
-3
.babelrc
{
"presets": ["es2015"]
}
-16
src/grayscale.js
/**
* @name transform
* @param {object} imageData
* Iterate over the array applying the grayscale transformation
*/
export function transform(data, length) {
for (let i = 0; i < length; i += 4) {
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
// CIE luminance for the RGB
// The human eye is bad at seeing red and blue, so we de-emphasize them.
const v = 0.2126 * r + 0.7152 * g + 0.0722 * b;
data[i] = data[i + 1] = data[i + 2] = v;
}
}
-20
src/worker.js
import { transform } from './grayscale';
module.exports = function (self) {
self.addEventListener('message', (e) => {
const canvasData = e.data.data;
const binaryData = canvasData.data;
const length = e.data.length;
const index = e.data.index;
transform(binaryData, length);
self.postMessage({
result: canvasData,
index
});
self.close();
});
};
-31
tests/gamma-spec.js
import { expect } from 'chai';
import { transform } from '../src/grayscale';
describe('grayscale', () => {
it('should apply transformation', () => {
const data = [
193,
219,
242,
255,
193,
219,
242,
255
];
const expectedData = [
215.13299999999998,
215.13299999999998,
215.13299999999998,
255,
193,
219,
242,
255
];
transform(data, 4);
expect(data).to.deep.equal(expectedData);
});
});
-70
tests/worker-spec.js
import { expect } from 'chai';
import sinon from 'sinon';
import worker from '../src/worker';
import * as grayscale from '../src/grayscale';
describe('worker', () => {
let self;
beforeEach(() => {
self = {
postMessage: sinon.stub(),
close: sinon.stub()
};
sinon.stub(grayscale, 'transform');
});
context('message', () => {
it('should make a postMessage and close itself', (done) => {
self.addEventListener = (type, fn) => {
const e = {
data: {
params: {
adjustment: 5
},
data: {
data: [
193,
219,
242,
255,
193,
219,
242,
255
]
},
length: 8,
index: 0
}
};
fn(e);
expect(self.postMessage.calledWith({
result: [
198,
224,
247,
255,
193,
219,
242,
255
],
index: 0
}));
expect(self.postMessage.calledOnce).to.equal(true);
expect(self.close.calledOnce).to.equal(true);
done();
};
worker(self);
});
});
});