From fcd0f6514b91fcf82b44b695913a7cce8ba1ffe3 Mon Sep 17 00:00:00 2001 From: DrMaxNix Date: Sun, 21 Feb 2021 19:45:51 +0100 Subject: [PATCH] Update README.md --- README.md | 44 ++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 42 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 81c1d63..40c73d5 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,49 @@ # Pixelimg.js -[![GitHub release](https://img.shields.io/badge/release-v1.0.0-orange)](https://github.com/DrMaxNix/pixelimgjs) +[![GitHub release](https://img.shields.io/badge/release-v1.0.1-orange)](https://github.com/DrMaxNix/pixelimgjs) [![License](https://img.shields.io/badge/license-MIT-green)](https://github.com/DrMaxNix/pixelimgjs/blob/main/LICENSE) [![Maintaner](https://img.shields.io/badge/maintainer-DrMaxNix-blue)](https://www.drmaxnix.de) Pixelimg.js is a rather small js-library to display code-generated pixel images inside of a html image-element. + ## Installation -_todo_ +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: +```html + +``` + + +## Usage +#### HTML image element +The only two important parts here are: +1. The element must be an image `` +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 +```html + +``` + +#### 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) + +More arguments for the constructor can be found in the [Functions/constructor](#constructor) section. + + +## Functions +#### constructor +Bla + + +## Examples +#### 1. Do something + +#### 2. Do something else