giventofly / pixelit

Create pixel art from an image

Pixel It

Javascript library to create pixel art from an image. See Pixel It in action.

Index

• Files
• Examples
• Documentation
• Api
• Local development
• Changelog

Files

On /dist you can find the files you need

file	description
pixelit.js	javascript es6 file
pixelitmin.js	javascript minified and babeljs.io parsed for es5

Examples

Original image and after Pixel It did some work on it.

No filter applied and color palette used.

Documentation

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="sky.jpg"  id="pixelitimg" alt="">
    <canvas id="pixelitcanvas"></canvas>
    <script src="pixelit.js"></script>
    <script>
      //create object
      const px = new pixelit();
      px.draw().pixelate();
    </script>

You can use this option when creating the instance of Pixel It

    const 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 pallete
      maxHeight: int, 
      //defaults to null
      maxWidth: int, 
      //defaults to null
    }
    const px = new pixelit(config);

Api

method
.draw()	draw to canvas from image source and resizes if max height or max width is reached
.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

Working example:

    <img  src="assets/sky.jpg"  id="pixelitimg"  alt="">
    <canvas  id="pixelitcanvas"></canvas>
    <script>
    const mypalette = [
    [26,28,44],[93,39,93],[177, 62, 83],[239, 125, 87],[255, 205, 117],[167, 240, 112],[56, 183, 100],[37, 113, 121],[41, 54, 111],[59, 93, 201],[65, 166, 246],[115, 239, 247],[244, 244, 244],[148, 176, 194],[86, 108, 134],[51, 60, 87]
    ];
    const  px  =  new  pixelit({from:  document.getElementById('pixelitimg'),
    "palette": mypalette});
    px.draw().pixelate().convertPalette();
    </script>

Local development

Run npm install to install the needed files, edit javascript from /src/ folder and run gulp serve to make a direct copy and a minified and transpiled files into /dist and /docs/js respectively.

You have inside the docs page a tests page to check changes to different image sizes.

Changelog

2023-02-25

• Added tip links

2023-01-28

• Added a new option on the live page to add custom palettes

2022-03-05

• Added a page with tests
• Fixed image cut for smaller images and better border removal for bigger images

2022-02-16

• Github page added scroll down selector for palette change

2022-02-10

• Github page added changelog
• Github page added local development information
• Added gulp to minifiy and transpile without the need for aditional tools
• Fix border appearing on bigger images
• Added new palettes on live page

pixelit's Issues

bug: wrong image size

Hi!

me again 😅, I was working with your tool, but seems that I have some issues when I try to pixelate a small image (250x250) as you can see in the attachment, the image it's not properly displayed (the right/bottom side of it it's cropped)

Can I get the number of pixel by colour in a picture?

for example the above picture, I want to know how many of the pixel are in yellow and how many of them are purple

Custom palette picker eye dropper does not work correctly

Alaways gives a value of NAN for red making it impossible to choose a color using edge on openSuse linux

Website: change palette

I have been using your web site to make NFT’s and have been using the change palette option and was having trouble with clicking the button until I get the palette I want. So therefore can u make it where there’s a scroll down with all the palettes and you can just click on which ever palette u want

Instructions on usage unclear

Firstly, great project.

I'm primarily a Lua and Python dev and don't deal with JS that much, so I don't know how to use this tool locally. All I want to do is just use a custom palette to pixelate an image. I have the repo cloned and npm install'ed but am unsure how to actually point it at a jpg and get a result. I don't see anywhere in src/main.js to add in a file name.

Some extra info on how to use this would be greatly appreciated, if you have some time. Thanks.

Palette isn't being applied to image

Apologies if this isn't the correct place to post this or if I'm overlooking something simple...

I'm attempting to generate an image with a custom palette. I'm getting a pixelated image, but the colors are the same as the original image.

Here's my code:

<html>
  <head title="Generate Pixel Art"></head>
  <body>
    <img src="assets/myimage.jpg" id="pixelitimg" alt="">
    <canvas id="pixelitcanvas"></canvas>
    <script src="dist/pixelit.js"></script>
    <script>
        const drawImage = () => {
          const mypalette = [
          [0, 255, 0], [0, 100, 0], [0, 150, 0], [0, 200, 0]
          ];
          const px = new pixelit({
              from:  document.getElementById('pixelitimg'), 
              palette: mypalette, 
              scale: 16
            });
          px.draw().pixelate().convertPalette(); 
        }
        setTimeout(drawImage, 100)
    </script> 
  </body>
</html>

Does anything jump out as wrong here?

Note: Without putting the code in a callback and using setTimeout I was getting a blank page.

Thanks!!

Per Layer/Object Support for SVG images

I'm on a quest to find a way to convert Vector Images to pixel art, as on the "Out of this World" game.

Here's a discussion on it:
aseprite/aseprite#2704 (comment)

Maybe a way to have this to implement pixelit on svg files but with a twist,
The effect would be reapplied multiple times on each layer/object from the svg file, That would be:

• Run pixelit 1 time over a stroke layer/object, using only the stroke color as palette,
• Run pixelt 1 time over a fill object, using the fill color as a palette.
• Run pixelt 1 time over over the next stroke or fill layer
• repeats those tasks until all layers/objects are processed

The final result would be something close to the image bellow

Today pixelit does something similar to this:

It's also important to check issue #10 in order to this gimmicky suggestion to work.

---

Maybe this suggestion could also be expanded to all kind of images, by using some kind of posterize effect + breaking the image into multiple images depending on the color used.

Thanks for the amazing work

Can't customize colors in the palette, considering adding this feature?

Can't customize colors in the palette, I can only select presets, considering adding this feature?

Node JS Backend

Can this be used in complete nodeJs? No Front end, but want the image pixelated in CMD.

A grey artificial border appears after pixelation

Hi,
thanks for creating such a nice tool!

I have tested the tool and most of it works nicely. However for some reason I always get this weird artifical border which was not there in the original png. See image below.
Do you know what the problem might be?

Best regards!

Pixelit with node js

Hi. I've adapted your code to run using Node as a terminal application.
The repo is here and I link to your project.
I hope that's fine with you.

Thanks.

Partial opacity color sampling

It could be a feature or could be a bug but when you load a png with transparency, the resulting pixelated image retains semi transparent colors from the border between opaque pixels and the background. It might be helpful to have a method to strip the underlying partially transparent pixels of their opacity so that the resulting image keeps the selected color palette. Well, I guess it wouldn't be striping it but rather rounding up or down. Like If a pixel is mostly transparent, just round it down to nothing but if its mostly opaque, round it up. It would feel more like pixel art since that rarely has partial transparency.
Example image where the transparency is retained from the original img:

amazing work!

good job

Incomplete render on larger images

Hey, I've noticed the pixelized renders are incomplete for more detailed combinations of resolution/file size/block size. Happy to see this git active!

feature request: NODE compatibility

Hi!

First of all thanks for this tool, looks pretty good!

I would like to ask for a feature request, basically, I want a script to automatically pixelate some images in a directory, but I saw that this library uses Document.getElement while I want to use Node, (fs library, for getting the image of a dir)

would be a possibility to have this compatible in Node??

thanks in advance!

Way to return number of pixels in each colour

Is there a way to return the amount of pixels for each colour in the chosen pallet?
Was hoping to find something in the API butc an't see an option.

For example: 4 blue, 24 orange, 32 white.

Thank you

Palette change(small issue)

Mb I couldn’t figure out how to delete the issue

Getting output data from canvas

Is there a way to retrieve the data from the painted canvas, specifically the colours and coordinates so I can know how many of each colour has been used, and where it is?

palette can't limit color

block 80 X80 = 6400

I exported the color , and Paste on excel duplicates , I tested about 200-600 color , But I only set 30 palette

how can i limit color??

similar effect as

we tried this but missing details in the face. If you see https://pixel-me.tokyo/en/ and upload a image (face detection) the converting to a pixel image is so great, how they do this? and is this possible with your script??

Can we added custom palette?

Hey guys,
Just wondering if we can use our own preset custom palette?
Can you guys add feature to add custom palette? I really like pixelit
Many Thanks !

For loops and multiple jpeg or gif output

Hello, great library!

Is it possibile to add a for loop in order to iteratively change options (for example the scale) and output every generated variant as an image?

Setting up 1 generated px to 1 real px ratio

Hi!

I'm struggling with setting up pixelit so it would produce image with 1real pixel to 1 generated pixel ratio. Do you think that there is any easy way to do that?

Another way to make any manual post-processing easier would be to have exact dimensions of pixel grid and if it starts from the top-left corner of the image or center. I initially thought that generated pixels would be perfect squares but somehow it was quite hard to fit generated image in a regular grid, especially when it seems that pixels can be a bit cut off close to the edges of image.

EDIT: BTW this library is great, I haven't found anything working better in general :)

EDIT2:
The very quick temporary solution I found was to change this:

pixelit/dist/pixelit.js

Lines 201 to 211 in be69109

	this.ctx.drawImage(
	tempCanvas,
	0,
	0,
	scaledW,
	scaledH,
	0,
	0,
	this.drawfrom.naturalWidth,
	this.drawfrom.naturalHeight
	);

To:

    this.ctx.drawImage(
      tempCanvas,
      0,
      0,
      scaledW,
      scaledH,
      0,
      0,
      scaledW,
      scaledH,
    );
    ```

Amazing tool - one edit

Is it possible to remove the small image from the top left in the field, so it doesn't come with the download?
let me know! :)

Overall amazing tool!

Thank you

You haven't set up github Discussions so I'm posting it here.

Thank you for creating this, now I can easily convert my icons into pixel icons and create pixel versions of my favorite fonts.
Just a request, when I download the image, it contains both the original size and pixelated size on the top left corner in the same image, can you make them separate? It's fine this way too but it would be great to be able to download them separately.

Pixelated images is not viewing in my game when running in lenovo G560(super old laptop).

I am using Pixel it for creating game assets. When i checked the game.exe in my old laptop, the images used from Pixel it was not showing. It was only showing the images that i have hand drawn. But the images are viewable in latest and mid generations laptops.