Locate & Outline Objects In Images Based On Colors – Pixfinder

Preview:

Description:

Pixfinder is a vanilla JavaScript library that allows you to detect and extract objects from images on the client side.

Its core function is to analyze an image and identify objects based on the colors you specify. This can be useful in various scenarios:

• Image Analysis: Quickly identify and extract objects from images for further analysis.
• Object Detection: Useful in applications where object detection by color is crucial, such as in quality control for manufacturing.
• Interactive Applications: Enhance user interaction by allowing objects to be highlighted or selected based on color.

How to use it:

1. Download the pixfinder package and then load pixfinder.js into your HTML document:

<script src="/dist/pixfinder.js"></script>

2. Prepare your HTML structure with an image and a canvas element:

<img id="img" src="sample.jpg" />
<canvas id="canv"></canvas>

3. Use the pix.findAll() method to extract objects from the image:

var img = document.getElementById('img');
pix.util.dom.onload(img, function() {
  var objects = pix.findAll({
      img: img,
      distance: 10,
      colors: ['ffdb02'],
      clearNoise: 5,
      tolerance: 50
  });
  objects.forEach(draw);
});
function draw(object) {
  var ctx = document.getElementById("canv").getContext("2d");
  ctx.beginPath();
  object.forEach(function(point) {
      ctx.arc(point.x, point.y, 1, 0, 2 * Math.PI);
  });
  ctx.stroke();
  ctx.closePath();
}

4. Available options for the pix.findAll() method:

• img: (HTMLImageElement | HTMLCanvasElement) The image or canvas element to analyze.
• colors: (Array) An array of colors to find.
• tolerance: (Number, default: 50) The color variation in shades. It allows you to find objects that aren’t of exact color.
• accuracy: (Number, default: 2) The pixel analysis interval. For example, 1 analyzes every pixel, 2 analyzes every second pixel. Greater accuracy values mean better performance but lower quality, and vice-versa. Must be a positive integer.
• distance: (Number, default: 10) The pixel distance between objects for grouping. Pixels closer than this distance belong to the same object.
• clearNoise: (Boolean | Number, default: false) Removes objects below the specified pixel count or disables noise clearing if false.
• concavity: (Number, default: 10) Determines the concavity of the object’s edges. It relies on hull.js library. See hull.js docs for details.

5. Pixfinder also provides a find() method that starts searching from the start point and returns one object that belongs to this point. This method is useful if you want to highlight an object under the mouse cursor. Available options:

• img: (HTMLImageElement | HTMLCanvasElement) The image or canvas to be analyzed.
• colors: (Array) The colors of the objects to find.
• startPoint: (Point) The starting point for the object pixel search.
• tolerance: (Number, default: 50) Color variation in shades.
• distance: (Number, default: 10) Pixel distance to determine object grouping.
• concavity: (Number, default: 10) Determines the concavity of object edges, same as in findAll

pix.find(options)

6. DOM utility functions:

• onload(<HTMLImageElement> img, <Function> func): Calls the function when the image loads.
• loaded(<HTMLImageElement> img): Checks whether the image is loaded.