image-filter-grayscale - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

index.js

@@ -1,21 +0,1 @@
-function getImageElement(selector) {
-    var element = document.querySelectorAll(selector)[0];
-
-    if (!element) {
-        throw new Error('image-filter-grayscale:: no "from" element found');
-    }
-
-    return element;
-}
-
-function getImageData(context, element) {
-
-    if (element.tagName !== 'IMG') {
-        throw new Error('image-filter-grayscale:: invalid origin');
-    }
-
-    context.drawImage(element, 0, 0 );
-    return context.getImageData(0, 0, element.width, element.height);
-}
-
 function transform(canvas, context, imageData) {
@@ -38,29 +18,6 @@ var data = imageData.data;
 
-function appendResult(selector, src) {
-
-    var target;
-    var image;
-
-    if (!selector) {
-        return;
-    }
-
-    target = document.querySelectorAll(selector)[0];
-
-    if (!target) {
-        throw new Error('image-filter-grayscale:: no "to" element found');
-    }
-
-    image = document.createElement('img');
-    image.setAttribute('src', src);
-    target.appendChild(image);
-}
-
 /**
- * @name contrastImage
+ * @name grayScale
  * @param {object} options
- * @param {string} options.url - image url
- * @param {string} options.imageData - data of a image extracted from a canvas
- * @param {string} options.from - dom selector of the original image
- * @param {string} options.to - dom selector of the target result
+ * @param {string} options.data - data of a image extracted from a canvas
  */
@@ -74,26 +31,7 @@ module.exports = function grayScale(options) {
 
-    if (!options || (!options.url && !options.imageData && !options.from)) {
-        throw new Error('image-filter-grayscale:: invalid options object');
+    if (!options.data) {
+        throw new Error('image-grayscale:: invalid options provided');
     }
 
-    if (options.url) {
-        element = document.createElement('img');
-        element.setAttribute('src', options.url);
-        data = getImageData(context, element);
-    } else if (options.imageData) {
-        data = options.imageData;
-    } else if (options.from) {
-        element = getImageElement(options.from);
-        data = getImageData(context, element);
-    }
-
-    if (!data) {
-        throw new Error('image-filter-grayscale:: no data found');
-    }
-
-    result = transform(canvas, context, data);
-
-    appendResult(options.to, result);
-
-    return result;
+    return transform(canvas, context, options.data);
 }

package.json

 {
   "name": "image-filter-grayscale",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Small library to apply a grayscale transformation to a image",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -12,57 +12,10 @@ # image-filter-grayscale
 ## Usage
-At the moment there are three ways of usage:
-* from image
-* from imageData
-* from url
+It applies a grayscale transformation to a base64 image. If you want a more complete library, please check image-filters that wraps this and other libraries to provide a more complete suite of image filters.
 
-### From image:
-
-JS file:
 ```js
 var imageGrayscale = require('image-filter-grayscale');
 
-imageGrayscale({
-    from: '#original',
-    to: '#target-1',
-    adjustment: 30
+var result = imageGrayscale({
+    data: IMAGE_DATA
 });
 ```
-
-HTML:
-```html
-<img id="original" src="http://lorempixel.com/400/200" />
-<div id="target-1"></div>
-```
-
-### From canvas imageData:
-
-```js
-var imageGrayscale = require('image-filter-grayscale');
-
-var canvas = document.createElement('canvas');
-var context = canvas.getContext('2d');
-var img = new Image;
-img.onload = function(){
-    context.drawImage(img,0,0);
-
-    var imageData = context.getImageData(0, 0, img.width, img.height);
-
-    var result2 = imageGrayscale({
-        imageData: imageData,
-        to: '#target-2',
-        adjustment: 30
-    });
-};
-img.src = "http://lorempixel.com/400/200";
-```
-
-### From image url:
-```js
-var imageGrayscale = require('image-filter-grayscale');
-
-imageGrayscale({
-    url: "http://lorempixel.com/400/200",
-    to: '#target-3',
-    adjustment: 30
-});
-```

sandbox/sandbox.js

 var imageGrayscale = require('../index');
 
+function applyResults(selector, src) {
+    var target;
+    var image;
+
+    target = document.querySelectorAll(selector)[0];
+
+    image = document.createElement('img');
+    image.setAttribute('src', src);
+    target.appendChild(image);
+}
+
 window.onload = function () {
 
-    //Usage 1:
-    imageGrayscale({
-        from: '#original',
-        to: '#target-1'
-    });
-    //Usage 2:
     var canvas = document.createElement('canvas');
@@ -17,16 +22,10 @@ var context = canvas.getContext('2d');
 
-        var imageData = context.getImageData(0, 0, img.width, img.height);
+        var data = context.getImageData(0, 0, img.width, img.height);
 
-        var result2 = imageGrayscale({
-            imageData: imageData,
-            to: '#target-2'
+        var results1 = imageGrayscale({
+            data: data
         });
+        applyResults('#target-1', results1);
     };
     img.src = "http://lorempixel.com/400/200";
-
-    //Usage 3:
-    imageGrayscale({
-        url: "http://lorempixel.com/400/200",
-        to: '#target-3'
-    });
 }

No alert changes

Worsened metrics

Total package byte prevSize

3435

decreased by-42.4%

Lines of code

53

decreased by-48.04%

Number of lines in readme file

21

decreased by-69.12%

No dependency changes