Pixel It

Javascript library to create pixel art from an image.

try it examples Documentation github

Pixel It allows you to take an image and convert into pixel art. You can define the "pixel" size, create a pixel image using a color palette and also convert to a pixel grayscale image.

You can use Pixel It to be your jump start to make some pixel art. Check the documentation for all the available api methods.

Default usage

Blocksize of 7 and no other modification

image pixelated block 4

Color palette

Blocksize of 17 and a 4 Color palette

image pixelated 4c palette

Greyscale

blocksize of 10 and greyscale

image pixelated greyscale

Color palette

Blocksize of 8 and a 16 Color palette

image pixelated 16c palette

Pixel It now

You can try pixel It live here, you can use the default image (just change some value) or upload an image to start see the changes.

Custom palette

Click on the color to change it

After clicking save you need to refresh to see the palette added

Click clear to remove all of your custom palettes, this is irreversible. Refresh to see changes.

Did you find this real useful or just want to give some tip? Buy Me A Coffee or you can can also send me some ADA: addr1q8kc33nwrysx9wc4znm9xdlvst7eq87ear0jx2n23zzjna7su5y05wag5gtgalm53gxjg4hgv3jayjc3msv57lu56psqa07hdp

Documentation

Quick usage

To use the quick default configuration you need an element from where to draw the image and canvas element with the id pixelitcanvas. Then load the pixelit.js script and apply it on an image.

<img src="assets/sky.jpg"  id="pixelitimg" alt="">
<canvas id="pixelitcanvas"></canvas>
<script src="dist/pixelit.js"></script>
<script>
  //create object
  const px = new pixelit();
  px.draw().pixelate();
</script

Options

You can pass some options when creating the instance (you can alter them later using the api methods).

config = {
  to : elem, defaults to document.getElementById("pixelitcanvas")
  from : elem, defaults to document.getElementById("pixelitimg")
  scale : int from 0-50, defaults to 8
  palette : [[r,g,b]], defaults to a fixed palette
  maxHeight: int, defaults to null
  maxWidth: int, defaults to null
}

API

You can chain all methods together, beware that the order they are applied can change the final result.

Applying first the color palette and then the greyscale can give a slightlity different image.

.draw() draw to canvas from image source and resizes if max height or max width is reached

.hideFromImg() hides the from image element, is applied on object creation

.setDrawFrom(elem) elem to get the image to pixelate

.setDrawTo(elem) canvas elem to draw the image

.setFromImgSource(src) change the src from the image element

.setpalette(arr) sets the color palette to use, takes an array of rgb colors: [[int,int,int]], int from 0 to 255

.setMaxWidth(int) set canvas image maximum width, it can resize the output image, only used when .resizeImage() is applied

.setMaxHeight(int) set canvas image maximum height, it can resize the output image, max height overrides max width, only used when .resizeImage() is applied

.setScale(int) set pixelate scale [0...50]

.getpalette() returns array of current palette, can't be chained

.convertGrayscale() converts image to greyscale, apply only after .draw is called

.convertpalette() converts image with the defined color palette, apply only after .draw is called

.resizeImage() resizes the output image if bigger than the defined max Height or max Width

.pixelate() draws a pixelated version of the from image to the to canvas, , apply only after .draw is called

.saveImage() saves/downloads current image

github