Pixels.JS In Action Try Out The Web App

Usage

Pixels.js is compatible with both the browser and Node.JS, however usage varies depending on which you're using. Make sure to read the notes provided with each, and if you have any issues, you can contact me on Discord (Silvia923#9909) or open an issue on GitHub.

For Browser Use

HTML

                  <img src="image.PNG" id="img" />
              

JavaScript

                  // Select the image you wish to filter
                  var img = document.getElementById("img")

                  // First parameter is the image object, and the second is the filter you wish to apply.
                  img.onload = function() {
                    pixelsJS.filterImg(img, "twenties");      
}               

For Node

Usage for Node.JS varies slightly to the browser. Whereas in-browser Pixels.js automatically replaces the image on the webpage with the newly filtered one, in Node, your environment and canvas libraries can differ, so we've kept usage flexible for Node.

Simply get the image data of the image and pass it to the filterImgData function. The output will be the new image data. You can then place this new image data onto your canvas.

Example

This example uses node-canvas and get-image-data, two NPM modules that make canvas rendering easier, however, you can choose whatever libraries you like; this example merely illustrates using Pixels.js in tandem with node-canvas.

                  const get-image-data = require('get-image-data');
                  const pixelsJS = require("pixelsjs");
                  const Canvas = require('canvas')
                  
                  var canvas = new Canvas(200, 200),
                      ctx = canvas.getContext('2d'),
                  
                  get-image-data('./image.jpg', function(error, info) {
                    var imgData = info.data
                    
                    let newImgData = pixelsJS.filterImgData(imgData, "solange");
                    
                    ctx.putImageData(imgData, 0, 0);
                    
                  })