examples | ||
LICENSE | ||
pixelimg.js | ||
README.md |
Pixelimg.js
Pixelimg.js is a rather small js-library to display code-generated pixel images inside of a html image-element.
Installation
To include Pixelimg.js in your html code you have two options:
- Either download the pixelimg.js file from the repo and serve it by yourself
- Or use a CDN
Example using jsdelivr.net:
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/DrMaxNix/pixelimgjs@1.0/pixelimg.min.js"></script>
Usage
HTML image element
The only two important parts here are:
- The element must be an image
<img />
- The element should have an id-tag (or any other data-tag) which helps specifying the element later when we will be loading data into the image
<img id="img1" />
Create Pixelimg-object
To be able to work with your image you need to create an object for each of them.
const img1 = new Pixelimg(document.getElementById("img1"), {matrix:8, image:512});
Arguments shown above:
matrix
The pixel-matrix will have 8 by 8 pixels in sizeimage
The png image which is generated will have a size of 512 by 512 pixels (=resolution)
More arguments for the constructor can be found in the Functions section at new Pixelimg(ELEMENT, OPTIONS).
Functions
new Pixelimg(ELEMENT, OPTIONS)
Return a new Pixelimg-object for an ELEMENT with OPTIONS
Arguments
- ELEMENT: Reference to the img-element to be linked
- OPTIONS: Named args
OPTIONS.matrix
Matrix size for width and heightOPTIONS.matrix_width
Matrix width (only when OPTIONS.matrix not used)OPTIONS.matrix_height
Matrix height (only when OPTIONS.matrix not used)OPTIONS.image
Image size for width and height for resulting png (=resolution)OPTIONS.image_width
Image width (only when OPTIONS.image not used)OPTIONS.image_height
Image height (only when OPTIONS.image not used)OPTIONS.autodraw
Redraw image every time the matrix is changed; default:false
OPTIONS.firstdraw
Draw image after the constructor was called; default:true
Returns
A Pixelimg-object
color_from_hex(HEX_STRING)
Get pixelimg-compatible rgba color from css-like hex-color
Arguments
- HEX_STRING: Hex-color as string
- eg.
#FF0000
-> Red - eg.
#F8A
->#FF88AA
-> Pink-ish - eg.
#0
->#000000
-> Black - eg.
#08
->#080808
-> A bit lighter than black - eg.
0F0
->#00FF00
-> Green
- eg.
Returns
color_from_rgba(R, G, B, A)
Get pixelimg-compatible rgba color from rgba-values
Arguments
- R: Red component; Range:
0-255 (int)
- G: Green component; Range:
0-255 (int)
- B: Blue component; Range:
0-255 (int)
- A: Alpha (opacity); Range:
0.0-1.0 (float)
Returns
setPixel(OPTIONS)
Set pixel at X, Y to COLOR
Arguments
- OPTIONS: Named args
OPTIONS.x
Pixel's x-coordinate; Starting from0
= furthest leftOPTIONS.y
Pixel's y-coordinate; Starting from0
= furthest topOPTIONS.color
Color for that pixel (Pixelimg-color-object)
setMatrix(MATRIX)
Update whole matrix from 2d-array
Arguments
- MATRIX: 2d-array of Pixelimg-color-objects
draw()
Draw new image from matrix
Color-object
An object storing red, green, blue and alpha data for a color (all Range: 0-255 (int)
)
{r:255, g:127, b:0, a:255}