Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sayan-maity/spark-filter
Spark Filter Provides with all kind of filters on an Image ✨, Enjoy it 🎇
https://github.com/sayan-maity/spark-filter
canvas css filterous html javascript
Last synced: about 3 hours ago
JSON representation
Spark Filter Provides with all kind of filters on an Image ✨, Enjoy it 🎇
- Host: GitHub
- URL: https://github.com/sayan-maity/spark-filter
- Owner: Sayan-Maity
- License: mit
- Created: 2022-11-30T21:25:54.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2022-12-10T15:59:18.000Z (almost 2 years ago)
- Last Synced: 2023-03-05T02:06:50.007Z (over 1 year ago)
- Topics: canvas, css, filterous, html, javascript
- Language: CSS
- Homepage: https://sayancr777-spark-filter.netlify.app/
- Size: 19.6 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Spark Filter
[](https://opensource.org/licenses/MIT)
[](http://makeapullrequest.com)
[](https://app.netlify.com/sites/sayancr777-spark-filter/deploys)
>Spark Filter is an Instagram-like image manipulation Web Application which is written in JavaScript and comes with pre-defined Instagram-like filters (with the same filter names and very similar effects).
Author : [Sayan Maity]([email protected])
## Installation
Spark Filter only uses a minified JavaScript code which is available on the Release page.
```
```
## Built with
- **Frontend**: HTML, CSS, Javascript
- **Version Control**: Git
- **Hosting**: Netlify, Github Pages
## Getting Bugs ?
Generally when the page loads, you would find difficulty in changing the filter of the images or even navigating through diffferent ```Demo Images``` given in the website. Actually this ```filterous``` library is a little buggy! So the only way to overcome this is to reload the page ```2-3 times``` and try to navigate between the demo pictures. \
After doing these actions also if you are facing issue, feel free to drop me a [mail]([email protected]) here.
## Usage
Import an image object to `filterous` and render as HTML with `renderHtml`.
```javascript
filterous.importImage(imgObj, options)
.applyFilter(filter, value)
.renderHtml(imageDOM);
```
also:
```javascript
filterous.importImage(imgObj, options)
.applyInstaFilter(filterName)
.renderHtml(imageDOM);
```
```javascript
var imageDOM = document.querySelector('img.photo');
var imgObj = new Image();
imgObj.src = 'input/leia.jpg';
filterous.importImage(imgObj, options)
.applyFilter('brightness', 0.2)
.applyFilter('contrast', -0.3)
.renderHtml(imageDOM);
```
Example with predefined Instagram-like effects:
```javascript
filterous.importImage(imgObj, options)
.applyInstaFilter(filterButton.id)
.renderHtml(imageDOM);
```
## Available Filter Effects and the Values
Most effects take a value (the amount of the effects) between -1 and 1.
for example, the value for the `brightness()` 0 means unchanged, -1 darkens the image, and 1 means full-brightness. The image will turn almost completely white.
| Effect | Adjestment(s) |
| ------------- | ------------------------------- |
| `grayscale` | N/A |
| `sepia` | 0 to 1 |
| `invert` | N/A |
| `brightness` | -1 to 1 |
| `saturation` | -1 to 1 |
| `contrast` | -1 to 1 |
| `rgbAdjust` | [r, g, b] |
| `colorFilter` | [r, g, b, adj] // adj is 0 to 1 |
| `convolute` | 3x3 matrix |
## Available InstaFilter Names
| Names | | | | | |
| -------- | --------- | --------- | ------- | -------- | --------- |
| normal | clarendon | gingham | moon | lark | reyes |
| juno | slumber | crema | ludwig | aden | perpetua |
| amaro | mayfair | rise | hudson | valencia | xpro2 |
| sierra | willow | lofi | inkwell | hefe | nashville |
| stinson | vesper | earlybird | brannan | sutro | toaster |
| walden | 1977 | kelvin | maven | ginza | skyline |
| dogpatch | brooklyn | helena | ashby | charmes | |
Note: `normal` gives no filter effect. It normalize the image to the original.
## Behind the Scene
Filterous takes an image into a `canvas` to manipulate the pixels of the image. Unlike the CSS filters that alters how the image appearance only on browsers, the JavaScript library actually alters the pixel color values. So you can actually download the modified image.
The `CanvasRenderingContext.getImageData()` method of the Canvas API returns an `ImageData` object representing the underlying pixel data of the canvas, and the `data` property of `pixelData` stores the color info of an each pixel in the canvas. (The diagram below shows a canvas size of only 9x9 pixel to make it simple).
Each pixel in the data array consists of 4 bytes values- red, green, blue, and alpha channel, and each of the R (red), G (green), B (blue) and A (alpha transparency) values can take values between 0 and 255.
This library alters R, G, or B values of each pixel (yes, each pixel in the entire image! so the operation can be quite slow with JavaScript!) to get filtered look.
## Setup and Installation
Fork and Clone this project. Make sure you have git installed. On the terminal, navigate to your workspace directory and run it
## Contributing
Pull requests are encouraged
## Future Scope
- UI part can be improved by adding some animations