pixelate-js

1.0.3 • Public • Published

pixelate-js

A node script that generates a random coloured pixelated wallpaper with an awesome JS logo at the center (Nothing complex just a straight forward image creation library) . Show your 💗 for JavaScript

Dependencies required

  • "canvas": "^2.4.1",
  • "chai": "^4.2.0",
  • "chai-files": "^1.4.0"
  • "get-image-colors": "^2.0.0"

Running

  • Import or do a require statement for pixelate-js in your application
var pixelate = require("pixelate-js")
  • Run your node application as follows
node <file-name>.js
  • Type the width of the image when prompted (pixels)
  • Type the height of the image when prompted (pixels)
  • Type the size of the pixels in the backdrop when prompted (pixels)
  • Type the size of the js logo in the backdrop when prompted (pixels)

Testing

  • To test the package navigate to module directory
cd .\node_modules\pixelate-js
  • Use the command below
npm run test
  • Tests if the image is created
  • Scans the image to check if it has a pixelated backdrop
  • Checks if the colors in the background are random

Snippets

Generate pixels with the specified size and random colors

  for (let x = 0; x < width; x = x + pixelSize) {
            for (let y = 0; y < height; y = y + pixelSize) {
                var randomColor = "#000000".replace(/0/g, function () { return (~~(Math.random() * 16)).toString(16); });
                randomHex.push(randomColor);
                ctx.fillStyle = randomColor
                color = "#"
                ctx.fillRect(x, y, pixelSize, pixelSize)
            }
        }

Autocomplete based on the array

 fs.readFile(__dirname + '/source/javascript.jpeg', function (err, data) {
            if (err) throw err;
            var img = new Canvas.Image; // Create a new Image
            img.src = data;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(img, (width / 2 - img.width / 4), (height / 2 - img.height / 4), img.width / 2, img.height / 2);
            var img = canvas.toDataURL();
            var data = img.replace(/^data:image\/\w+;base64,/, "");
            var buf = Buffer.from(data, 'base64');
            mkdirp(getDirName('output/pixelateJs.png'), function (err) {
                if (err) return cb(err);
            fs.writeFileSync('output/pixelateJs.png', buf);
            console.log("The file is generated inside the /output folder");
            });
        })

Output

The output is generated inside the /output and named as pixelateJs.png

alt text

Dependents (0)

Package Sidebar

Install

npm i pixelate-js

Weekly Downloads

1

Version

1.0.3

License

ISC

Unpacked Size

43.9 kB

Total Files

6

Last publish

Collaborators

  • dhiraj3194