to-pixels
v0.2.0
Published
convert images to pixel art and have fun
Downloads
24
Maintainers
Readme
new Pixel('art');
var pixelass = new Pixel('ass.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)
node & 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
new Pixel('art.png',function(instance){
var simple = instance.getType('canvas');
var svg = instance.getType('svg');
var img = instance.getType('img');
var boxShadow = instance.getType('boxShadow');
var colorArray = instance.getType('colorArray')(function(colors,row){
// e.g. colors = ['transparent', 'hsla(0,0,0,1)', 'hsla(0,0,0,1)', 'transparent']
// row = 32 (pixels/row)
});
});
options
new Pixel({
src: 'bart.png',
pixel: 6,
row: 64,
shape: 'circle',
hue: 20
hueRotate: -50,
saturate: -.5
},function(instance){
var output = instance.getType('img');
document.getElementById('example_options').appendChild(output);
});
methods
new Pixel('art.png', function(instance){
let type = 'canvas'; // canvas, svg, img, boxShadow, colorArray
let output = instance.getType(type);
});
supported types:
Version 0.2.x comes with two methods
get
: lazy method to generate when neededset
: set Options after initializing
Version 0.2.x offers color modification
hue
: only use this hue valuehueRotate
: 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