DrMaxNix
/
pixelimgjs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Update README.md

This commit is contained in:
DrMaxNix 2021-02-21 20:17:18 +01:00 committed by GitHub
parent fcd0f6514b
commit b21b08fabf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
README.md
View File

@ -18,7 +18,7 @@ Example using jsdelivr.net:
## Usage
#### HTML image element
### HTML image element
The only two important parts here are:
1. The element must be an image `<img />`
2. 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
@ -26,24 +26,48 @@ The only two important parts here are:
<img id="img1" />
```
#### Create Pixelimg-object
### Create Pixelimg-object
To be able to work with your image you need to create an object for each of them.
```javascript
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 size
- `image`: The png image which is generated will have a size of 512 by 512 pixels (=resolution)
- `matrix` The pixel-matrix will have 8 by 8 pixels in size
- `image` 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/constructor](#constructor) section.
## Functions
#### constructor
Bla
# 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 height
- `OPTIONS.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`_
## 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
## Examples
#### 1. Do something
#### 2. Do something else
# Examples
## 1. Do something
## 2. Do something else