Manipulate Images Pixel By Pixel Using JavaScript And Canvas – pixelmap

pixelmap.js  is a small image manipulation library which allows you to apply new pixel data to the original image using HTML5 canvas.

Also provides 6 built-in filter effects which can be applied to the images in a minute.

How to use it:

Include the pixelmap.js on the webpage

<script src="/lib/pixelmap.js"></script>

Apply new pixel data to an image you provide.

<img id="result" src="">

var img = document.createElement('img');
img.src = 'sample.jpg'
pixelmap.map(img, function(e) {
  // do something
});

Apply built-in filters to the image. Requires ‘pixelmapEffects.js’.

• Swap R-G (swapRG)
• Swap B-G (swapBG)
• Swap R-B (swapRB)
• Invert Color (invertColor)
• Grayscale (grayscaleAverage)
• Sepia (sepia)

<script src="lib/pixelmapEffects.js"></script>

pixelmap.map(img, pixelmapEffects);

Changelog:

10/17/2018

• JS update