Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/silvia-odwyer/pixels.js
JavaScript image filtering library, containing over 70 image filters
https://github.com/silvia-odwyer/pixels.js
hacktoberfest image-processing javascript library
Last synced: 7 days ago
JSON representation
JavaScript image filtering library, containing over 70 image filters
- Host: GitHub
- URL: https://github.com/silvia-odwyer/pixels.js
- Owner: silvia-odwyer
- License: apache-2.0
- Created: 2018-09-15T16:57:19.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-09-09T12:10:26.000Z (about 2 months ago)
- Last Synced: 2024-10-22T13:25:51.630Z (16 days ago)
- Topics: hacktoberfest, image-processing, javascript, library
- Language: JavaScript
- Homepage: https://silvia-odwyer.github.io/pixels.js/
- Size: 37.9 MB
- Stars: 124
- Watchers: 5
- Forks: 17
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Pixels.JS
## 70+ Photo Filters for your Browser & Node Projects
[](http://makeapullrequest.com)
[](https://github.com/ellerbrock/open-source-badges/)
[](https://pixelsjs.readthedocs.io/en/latest/?badge=latest)
Pixels.JS is an image filtering library with over 70 photo filters for use in the browser or with Node.JS.
Image filtering comprises vintage filters, solarizers, inverters, and over ninety more. You can explore these in the [official web app](https://silvia-odwyer.github.io/pixels.js/demo.html), which makes use of the library and each of its comprising filters.
## Check Out The Official Website
The official home of PixelsJS is now here! https://silvia-odwyer.github.io/pixels.js/
## Read The Docs [](https://pixelsjs.readthedocs.io/en/latest/?badge=latest)
For complete PixelsJS documentation: https://pixelsjs.readthedocs.io/en/latest/
## Importing Pixels.JS
### In The Browser
Include the following script tag in your webpage's head tag:
```html
```
### Node.JS
[NOT YET ON NPM; COMING SOON]
`npm install pixelsjs`
## PixelsJS In Action
On our website, you can enter your own image and view its filtered versions as well as extra demos, but here's a quick demo:
## Using Pixels.JS
### Browser
##### HTML
After you've included a copy of Pixels.JS in your head tag, include an image in your HTML:
```html
```
##### Javascript
Then, in your JavaScript:
```javascript
// Select the image you wish to filter
var img = document.getElementById("img")
// First parameter is the image object, and the second is the filter you wish to apply.
img.onload = function() {
pixelsJS.filterImg(img, "twenties");
}
```
#### Node.JS
Usage for Node.JS varies slightly to the browser. Whereas in-browser Pixels.JS automatically replaces the image on the webpage with the newly filtered one,
in Node, your environment and canvas libraries can differ, so we've kept usage flexible for Node.
This example uses node-canvas and get-image-data, two NPM modules that make canvas rendering easier, however, you can choose whatever libraries you like; this example merely illustrates using Pixels.js in tandem with node-canvas.
```javascript
const get_image_data = require('get-image-data');
const PixelsJS = require("Pixels.JS");
const Canvas = require('canvas')
var canvas = new Canvas(200, 200),
ctx = canvas.getContext('2d'),
get_image_data('./image.jpg', function(error, info) {
var imgData = info.data
let newImgData = PixelsJS.filterImgData(imgData, "solange");
ctx.putImageData(newImgData, 0, 0);
})
```
## Step-By-Step Guide
You can quickly get started with Pixels.JS using the sample code above, but if you're new to web development or want a guided tour,
just check out the guides below.
### Browser
1. Include the image on the webpage. `
`
2. In your JS, select the image you want to add filters to. `var img = document.getElementById("img")`
3. Pass the image into the filter function, and include the name of the filter you want.
`var filtered_img = Pixels.JS.filterImg(img, "sepia")`
The method filters the image and replaces the current image with the filtered one, so there's no need to append the new image to the DOM, as this is already
done for you.
### Node.JS
Simply get the image data of the image and pass it to the filterImgData function. The output will be the new image data.
You can then place this new image data onto your canvas.
## Contributing Guidelines
Want to contribute? I'm always delighted to work with other developers, so submit a Pull Request if you'd like to add any cool image filters.
:eyes:
- Identify which category your filter belongs in. Check the JS files found within the `lib` directory and see where your filter belongs.
If it doesn't belong in any, choose one or open an Issue and I'll create a new category.
- Add your filter function, ensuring it returns filtered image data.
- Add the name of your filter and its associated method to the filter_dict variable in index.js. Make sure to import the category file where the filtering method belongs.
## Featured In
PixelsJS has been featured in some frontend web dev outlets:
- [Best4WebDesign](https://www.best4webdesign.com/pixels-js-an-image-filtering-library/)
- [ByPeople](https://www.bypeople.com/pixels-js-photo-filters-library-node-js/)
PixelsJS has also been showcased in the weekly *Web Design Trends* newsletter:
- [Web Design Trends.io](https://www.webdesigntrends.io/web-design-trends-5/)
# Partners
PixelsJS has also inspired some of the filters found in image processing APIs.
### Recommended APIs
One such API is [ArcadiaJS](https://arcadia-api.xyz/), which provides an easy-to-use API for applying cool and
intriguing effects to images, whose endpoints are clear and reliable.
## Building the Project
Firstly, clone this repository:
```bash
git clone https://github.com/silvia-odwyer/pixels.js
```
Next up, install the dependencies:
```bash
cd pixels.js
npm install
```
To build the library for the browser, run:
```bash
npm run build:browser
```
## Future Plans
- This library currently contains 70 image filters, but I'd like to bring this to 100 in the next few weeks or so.
- Publish on NPM.