HTTPS SSH

new Pixel('art');

var pixelass = new Pixel('ass.png');

pixelASS.png

convert images to pixelart and more

  • Ever wanted to upscale an image while keeping the pixel density?
  • Ever wanted to make a mosaic effect from an image?
  • Absolutely sick of square pixels?
  • In need of a generator that delivers, images, canvas, SVG or box-shadow versions?

Pixel is here to help

Examples:
1. (v0.0.5)
2. (v0.0.5)
3. (v0.2.0)

npm & bower

npm install to-pixels
bower install to-pixels

common js

import Pixel from 'to-pixels'
// or
var Pixel = require('to-pixels');

browser

var Pixel = window.Pixel;

simple

var target = document.getElementById('example');
new Pixel('ass.png',function(set,get){
  var simple = get('canvas');
  target.appendChild(simple);
});

options

var target = document.getElementById('example');
new Pixel({
  src: 'bart.png',
  pixel: 20,
  row: 32,
  // hue: 50,
  // invert: true,
  hueRotate: 30,
  saturate: -.5
},function(set,get){
  set({
    pixel: 5,
    row: 64,
    shape: 'circle'
  });
  var output = get('img');
  target.appendChild(output);
});

callback

new Pixel('art.png', function(set,get){
  // set after init 
  // src cannot be changed
  set({pixel:10});
  // get the requested type
  let output = get('svg');
});

supported types: canvas svg img boxShadow * colorArray

Version 0.2.x comes with two callback methods

  • get: lazy method to generate when needed
  • set: set Options after initializing

Version 0.2.x offers color modification

  • hue: only use this hue value
  • hueRotate: rotate hue
  • saturate: saturate from -1 to 1
  • invert: inverts the colors

Due to performance concerns the new API does not render anything by itself