Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
image-contrast
Advanced tools
image-contrast - npm Package Compare versions
Comparing version 0.0.3 to 0.0.4
77
index.js
@@ -1,21 +0,1 @@ | ||
| function getImageElement(selector) { | ||
| var element = document.querySelectorAll(selector)[0]; | ||
| if (!element) { | ||
| throw new Error('image-contrast:: no "from" element found'); | ||
| } | ||
| return element; | ||
| } | ||
| function getImageData(context, element) { | ||
| if (element.tagName !== 'IMG') { | ||
| throw new Error('image-contrast:: invalid origin'); | ||
| } | ||
| context.drawImage(element, 0, 0 ); | ||
| return context.getImageData(0, 0, element.width, element.height); | ||
| } | ||
| function getFactor(contrast) { | ||
@@ -37,63 +17,22 @@ return (259 * (contrast + 255)) / (255 * (259 - contrast)); | ||
| function appendResult(selector, src) { | ||
| var target; | ||
| var image; | ||
| if (!selector) { | ||
| return; | ||
| } | ||
| target = document.querySelectorAll(selector)[0]; | ||
| if (!target) { | ||
| throw new Error('image-contrast:: no "to" element found'); | ||
| } | ||
| image = document.createElement('img'); | ||
| image.setAttribute('src', src); | ||
| target.appendChild(image); | ||
| } | ||
| /** | ||
| * @name contrastImage | ||
| * @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.contrast - contrast value to apply | ||
| * @param {string} options.data - data of a image extracted from a canvas | ||
| * @param {string} options.adjustment - contrast value to apply | ||
| */ | ||
| module.exports = function contrastImage(options) { | ||
| var element; | ||
| var data; | ||
| var factor | ||
| var factor; | ||
| var result; | ||
| var canvas = document.createElement('canvas'); | ||
| var context = canvas.getContext('2d'); | ||
| if (!options || !options.contrast || (!options.url && !options.imageData && !options.from)) { | ||
| throw new Error('image-contrast:: invalid options object'); | ||
| if (!options.data || !options.adjustment) { | ||
| throw new Error('image-brightness:: 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); | ||
| } | ||
| factor = getFactor(options.adjustment) | ||
| result = transform(canvas, context, options.data, factor); | ||
| if (!data) { | ||
| throw new Error('image-contrast:: no data found'); | ||
| } | ||
| factor = getFactor(options.contrast) | ||
| result = transform(canvas, context, data, factor); | ||
| appendResult(options.to, result); | ||
| return result; | ||
| } |
| { | ||
| "name": "image-contrast", | ||
| "version": "0.0.3", | ||
| "version": "0.0.4", | ||
| "description": "Small library to apply a contrast transformation to a image", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -12,60 +12,12 @@ # image-contrast | ||
| ## Usage | ||
| At the moment there are two ways of usage, you either provide a image or you provide a canvas imageData. | ||
| It applies a contrast 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 imageContrast = require('image-contrast'); | ||
| var imageBrightness = require('image-contrast'); | ||
| imageContrast({ | ||
| from: '#original', | ||
| to: '#target-1', | ||
| contrast: 30 | ||
| var result = imageContrast({ | ||
| data: IMAGE_DATA, | ||
| adjustment: 30 | ||
| }); | ||
| ``` | ||
| HTML: | ||
| ```html | ||
| <img id="original" src="http://lorempixel.com/400/200" /> | ||
| <div id="target-1"></div> | ||
| ``` | ||
| ### From canvas imageData: | ||
| ```js | ||
| var imageContrast = require('image-contrast'); | ||
| 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 result3 = imageContrast({ | ||
| imageData: imageData, | ||
| to: '#target-3', | ||
| contrast: 30 | ||
| }); | ||
| var result4 = imageContrast({ | ||
| imageData: imageData, | ||
| to: '#target-4', | ||
| contrast: 70 | ||
| }); | ||
| }; | ||
| img.src = "http://lorempixel.com/400/200"; | ||
| ``` | ||
| ### From image url: | ||
| ```js | ||
| var imageContrast = require('image-contrast'); | ||
| imageContrast({ | ||
| url: "http://lorempixel.com/400/200", | ||
| to: '#target-5', | ||
| contrast: 30 | ||
| }); | ||
| ``` |
| var imageContrast = require('../index'); | ||
| window.onload = function () { | ||
| function applyResults(selector, src) { | ||
| var target; | ||
| var image; | ||
| //Usage 1: | ||
| imageContrast({ | ||
| from: '#original', | ||
| to: '#target-1', | ||
| contrast: 30 | ||
| }); | ||
| target = document.querySelectorAll(selector)[0]; | ||
| imageContrast({ | ||
| from: '#original', | ||
| to: '#target-2', | ||
| contrast: 70 | ||
| }); | ||
| image = document.createElement('img'); | ||
| image.setAttribute('src', src); | ||
| target.appendChild(image); | ||
| } | ||
| //Usage 2: | ||
| window.onload = function () { | ||
| var canvas = document.createElement('canvas'); | ||
@@ -25,32 +22,17 @@ 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 result3 = imageContrast({ | ||
| imageData: imageData, | ||
| to: '#target-3', | ||
| contrast: 30 | ||
| var results1 = imageContrast({ | ||
| data: data, | ||
| adjustment: 30 | ||
| }); | ||
| console.log('result3: ', result3); | ||
| applyResults('#target-1', results1); | ||
| var result4 = imageContrast({ | ||
| imageData: imageData, | ||
| to: '#target-4', | ||
| contrast: 70 | ||
| var results2 = imageContrast({ | ||
| data: data, | ||
| adjustment: 70 | ||
| }); | ||
| console.log(result4); | ||
| applyResults('#target-2', results2); | ||
| }; | ||
| img.src = "http://lorempixel.com/400/200"; | ||
| //Usage 3: | ||
| imageContrast({ | ||
| url: "http://lorempixel.com/400/200", | ||
| to: '#target-5', | ||
| contrast: 30 | ||
| }); | ||
| imageContrast({ | ||
| url: "http://lorempixel.com/400/200", | ||
| to: '#target-6', | ||
| contrast: 70 | ||
| }); | ||
| } |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-44.57%
3770
- Lines of code
- decreased by-51.22%
60
- Number of lines in readme file
- decreased by-67.61%
23
No dependency changes