Manipulate Images Pixel By Pixel Using JavaScript And Canvas – pixelmap

Category: Image , Javascript | October 17, 2018
Author:howion
Views Total:439 views
Official Page:Go to website
Last Update:October 17, 2018
License:MIT

Preview:

Manipulate Images Pixel By Pixel Using JavaScript And Canvas – pixelmap

Description:

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

You Might Be Interested In:


Leave a Reply