https://github.com/noeldelgado/pixelify-img

Pixelate DOM images (or portions of it)
https://github.com/noeldelgado/pixelify-img

images javascript pixelated

Last synced: 2 months ago
JSON representation

Pixelate DOM images (or portions of it)

• Host: GitHub
• URL: https://github.com/noeldelgado/pixelify-img
• Owner: noeldelgado
• License: mit
• Created: 2014-04-21T02:14:36.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2020-07-28T23:54:59.000Z (almost 6 years ago)
• Last Synced: 2026-03-28T00:57:57.863Z (2 months ago)
• Topics: images, javascript, pixelated
• Language: JavaScript
• Homepage:
• Size: 18.6 KB
• Stars: 14
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# pixelify-img

[![npm-badge](https://img.shields.io/npm/v/pixelify-img.svg)](https://www.npmjs.com/package/pixelify-img)

![license-badge](https://img.shields.io/npm/l/pixelify-img.svg)

[![Known Vulnerabilities](https://snyk.io/test/npm/pixelify-img/badge.svg)](https://snyk.io/test/npm/pixelify-img)

[![Dependencies](https://img.shields.io/david/noeldelgado/pixelify-img.svg)](https://david-dm.org/noeldelgado/pixelify-img)

[![Total alerts](https://img.shields.io/lgtm/alerts/g/noeldelgado/pixelify-img.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/noeldelgado/pixelify-img/alerts/)

[![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/noeldelgado/pixelify-img.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/noeldelgado/pixelify-img/context:javascript)

JS library for pixelating DOM images (or a portion of it).

It replaces the source of the given image with the modified version using Data URL, so any CSS applied to the original image will be keep, this method is even responsive right of the box.

**TIP:** Since the data is pixelated at runtime, saving the pixelated version of the image and using that instead will be a good option.

## Demo

http://codepen.io/noeldelgado/pen/EGxzu/

## Dependencies

None

## Installation

**NPM**

```js

npm intall pixelify-img --save

```

## Usage

```js

const image = document.querySelector('img.my_image');

const options = {

    pixel: 50,

    alpha : .5

};

new Pixelify(image, options);

```

## API

### Pixelify(image, options)

#### @param image

| value type | default value | description |

|:--|:--|:--|

| `HTMLImageElement` | `undefined` *required | Reference to the DOM image |

#### @param Object:options

| value name | value type | default value | description |

|:--|:--|:--|:--|

| `pixel` | `Number` | 10 | pixels size |

| `x` | `Number` | 0 | x-axis pixel of the image (in natural size) from which the effect will start |

| `y` | `Number` | 0 | y-axis pixel of the image (in natural size) from which the effect start |

| `w` | `Number` | `image.naturalWidth` | width from `x` where the effect will end |

| `h` | `Number` | `image.naturalHeight` | height from `y` where the effect will end |

| `alpha` | `Number` | 1 | Opacity applied to each pixel |

| `clean` | `Boolean` | false | Defines if the canvas should be clear when applying `alpha`. |

## License

MIT © [Noel Delgado](https://pixelia.me/)