Generate Pixelated Images With JavaScript And Canvas – Pixel Display

Category: Image , Javascript | April 23, 2018
Author: GRA0007
Views Total: 560 views
Official Page: Go to website
Last Update: April 23, 2018
License: MIT

Preview:

Generate Pixelated Images With JavaScript And Canvas – Pixel Display

Description:

Pixel Display is a funny JavaScript library that generates pixelated images from JavaScript objects using HTML5 canvas.

It also has the ability to pixelate a regular image you provide.

Plus, the library enables you to animate the generated pixelated images in a given interval.

How to use it:

Download and import the minified version of the Pixel Display library into the document.

<script src="/path/to/pixeldisplay.min.js"></script>

Create an HTML canvas element with the following data attributes:

  • data-density
  • data-pixel-height
  • data-pixel-width.
  • data-foreground-color
  • data-background-color
<canvas id="display" data-density="10"></canvas>

Initialize the Pixel Display library and we’re ready to go.

var instance = new Display('#display');

Render an image from a JavaScript object.

var myData = [
    1,0,0,0,
    0,1,0,0,
    0,0,1,0,
    0,0,0,1
];
instance.renderArray(myData);

Pixelate an image.

instance.renderImage('image.png');

Animate pixelated images.

var myAnimation = new Animation(instance, [imageArray1, imageArray2], delay=1000);
// starts the animation
myAnimation.start();
// stops the animation
myAnimation.stop();

You Might Be Interested In:


Leave a Reply