		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: {

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"
		}
		}

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);
		});
		```

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';
		};

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);
		};

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();
		});
		});
		});
		});

.babelrc

src/grayscale.js

src/worker.js

tests/gamma-spec.js

tests/worker-spec.js

.eslintrc

Sorry, the diff of this file is not supported yet

.nvmrc

Sorry, the diff of this file is not supported yet

.travis.yml

Sorry, the diff of this file is not supported yet

image-filter-grayscale - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes