determine the boundaries of intricate shapes in an image with a white background using JavaScript

Question

determine the boundaries of intricate shapes in an image with a white background using JavaScript

How can I efficiently determine the boundaries of an image, specifically focusing on the non-white pixels using JavaScript algorithms?

For instance, how could I generate lists containing the x and y points corresponding to the boundary pixels of an object like this:

https://i.sstatic.net/ntSUp.png

It's important to note that the interior section should be included while any completely white areas within (like holes) should be excluded.

Therefore, the desired outcome would be two lists representing the x and y coordinates for constructing an object similar to this:

https://i.sstatic.net/h7DZy.png

Below is my current approach, which successfully handles concave objects but struggles with more complex shapes featuring convex sides.

Success with Concave Object

jsfiddle: https://jsfiddle.net/bhc4qn87/

Challenges with Complex Object

jsfiddle: https://jsfiddle.net/xdr9bt0w/

You can observe in the provided examples that the algorithm fails to accurately capture the inside of the more intricate, convex image.

The Question Persists

Hence, the question remains: what effective method can be employed to create a mask or outline of the image (excluding holes) that effectively covers the external regions of any complex/convex object where the background is white and the object components are colored? Thank you.

javascript image-processing canvas three.js

Answer 1

Answer №1

Utilizing a flood-fill algorithm, this method covers the outer regions with white and the inner areas with black.
It's important to note that this implementation is basic, as there are numerous optimizations that could enhance its efficiency (such as calculating the bounding rectangle and only filling inside it or utilizing 32-bit arrays for pixel assignment during filling).
Additionally, the filling always commences at the upper left corner; if the object currently occupies that pixel, an alternative pixel can be selected for the starting point.

For brevity, touch handlers and some other elements have been omitted from the example. The updateMask function is responsible for generating the mask.

function createCube(color, x, y){
    const geo = new THREE.BoxBufferGeometry(1, 1, 1);
    const mat = new THREE.MeshPhysicalMaterial({ color: color, opacity: 1 });
    const mesh = new THREE.Mesh(geo, mat);
    mesh.position.x = x;
    mesh.position.y = y;
    return mesh;
}

const c_main = document.getElementById("main");
const c_mask = document.getElementById("mask");
const ctx_mask = c_mask.getContext("2d");
ctx_mask.fillStyle = "#000";
const cw = c_main.width, ch = c_main.height;

const TWO_PI = Math.PI * 2;
const damp = 75, radius = 10, animspeed = 0.001;
const center = new THREE.Vector3(0, 0, 0);
let x1 = 0;
let phi = Math.PI / 2;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(35, cw / ch, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: c_main, alpha: true, antialias: false });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(cw, ch);
const camLight = new THREE.PointLight(0xdfdfdf, 1.8, 300, 2);
scene.add(new THREE.HemisphereLight(0x999999, 0x555555, 1));
scene.add(new THREE.AmbientLight(0x404040));
scene.add(camLight);
const cubes = [];
cubes.push(createCube(0x2378d3, 0, 0));
cubes.push(createCube(0xc36843, -0.75, 0.75));
cubes.push(createCube(0x43f873, -0.25, 1.5));
cubes.push(createCube(0x253621, 1, 0.35));
scene.add(...cubes);

function initialize() {
    c_main.addEventListener("mousedown", mouseDown, false);
    updateCamera();
    animate();
}

function updateMask(){
    //First, fill the canvas with black
    ctx_mask.globalCompositeOperation = "source-over";
    ctx_mask.fillRect(0,0, cw, ch);
    //Then using the composite operation "destination-in" the canvas is made transparent EXCEPT where the new image is drawn.
    ctx_mask.globalCompositeOperation = "destination-in";
    ctx_mask.drawImage(c_main, 0, 0);

    //Now, use a flood fill algorithm of your choice to fill the outer transparent field with white.
    const idata = ctx_mask.getImageData(0,0, cw, ch);
    const array = idata.data;
    floodFill(array, 0, 0, cw, ch);
    ctx_mask.putImageData(idata, 0, 0);

    //The only transparency left are in the "holes", we make these black by using the composite operation "destination-over" to paint black behind everything.
    ctx_mask.globalCompositeOperation = "destination-over";
    ctx_mask.fillRect(0,0, cw, ch);
}  

// More code here...

initialize();

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.js"></script>
<canvas id="main" width="300" height="200"></canvas>
<canvas id="mask" width="300" height="200"></canvas>

Answer 2

Utilizing a flood-fill algorithm, this method covers the outer regions with white and the inner areas with black.
It's important to note that this implementation is basic, as there are numerous optimizations that could enhance its efficiency (such as calculating the bounding rectangle and only filling inside it or utilizing 32-bit arrays for pixel assignment during filling).
Additionally, the filling always commences at the upper left corner; if the object currently occupies that pixel, an alternative pixel can be selected for the starting point.

For brevity, touch handlers and some other elements have been omitted from the example. The updateMask function is responsible for generating the mask.

function createCube(color, x, y){
    const geo = new THREE.BoxBufferGeometry(1, 1, 1);
    const mat = new THREE.MeshPhysicalMaterial({ color: color, opacity: 1 });
    const mesh = new THREE.Mesh(geo, mat);
    mesh.position.x = x;
    mesh.position.y = y;
    return mesh;
}

const c_main = document.getElementById("main");
const c_mask = document.getElementById("mask");
const ctx_mask = c_mask.getContext("2d");
ctx_mask.fillStyle = "#000";
const cw = c_main.width, ch = c_main.height;

const TWO_PI = Math.PI * 2;
const damp = 75, radius = 10, animspeed = 0.001;
const center = new THREE.Vector3(0, 0, 0);
let x1 = 0;
let phi = Math.PI / 2;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(35, cw / ch, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: c_main, alpha: true, antialias: false });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(cw, ch);
const camLight = new THREE.PointLight(0xdfdfdf, 1.8, 300, 2);
scene.add(new THREE.HemisphereLight(0x999999, 0x555555, 1));
scene.add(new THREE.AmbientLight(0x404040));
scene.add(camLight);
const cubes = [];
cubes.push(createCube(0x2378d3, 0, 0));
cubes.push(createCube(0xc36843, -0.75, 0.75));
cubes.push(createCube(0x43f873, -0.25, 1.5));
cubes.push(createCube(0x253621, 1, 0.35));
scene.add(...cubes);

function initialize() {
    c_main.addEventListener("mousedown", mouseDown, false);
    updateCamera();
    animate();
}

function updateMask(){
    //First, fill the canvas with black
    ctx_mask.globalCompositeOperation = "source-over";
    ctx_mask.fillRect(0,0, cw, ch);
    //Then using the composite operation "destination-in" the canvas is made transparent EXCEPT where the new image is drawn.
    ctx_mask.globalCompositeOperation = "destination-in";
    ctx_mask.drawImage(c_main, 0, 0);

    //Now, use a flood fill algorithm of your choice to fill the outer transparent field with white.
    const idata = ctx_mask.getImageData(0,0, cw, ch);
    const array = idata.data;
    floodFill(array, 0, 0, cw, ch);
    ctx_mask.putImageData(idata, 0, 0);

    //The only transparency left are in the "holes", we make these black by using the composite operation "destination-over" to paint black behind everything.
    ctx_mask.globalCompositeOperation = "destination-over";
    ctx_mask.fillRect(0,0, cw, ch);
}  

// More code here...

initialize();

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.js"></script>
<canvas id="main" width="300" height="200"></canvas>
<canvas id="mask" width="300" height="200"></canvas>

determine the boundaries of intricate shapes in an image with a white background using JavaScript

Success with Concave Object

Challenges with Complex Object

The Question Persists

Answer №1

Similar questions

Tips for optimizing snabbdom rendering speed

Using CSS to design a table-like structure with rows that span multiple columns

Which should you use: "states" in javascript or php?

Unable to apply an icon using a style component, yet the same style functions correctly in a ".css" file

Whenever I hit refresh on my Three.js based page, Firefox fails to clear the memory properly

JQuery toggle class transition failing to function

What is the process for adjusting the scale value in pixels?

Integrate Javascript Chart into Your Rails Application

I am unsure about how to properly implement the reduce function

Two ng-click events are triggered within a nested ng-click

JavaScript runs a function multiple times at various intervals

"Maximizing the efficiency of passing state in React: expert tips

What possible reasons could explain why certain AngularJS code only functions properly when the Internet Explorer console is actively open

Is it possible to center the image and resize it even when the window is resized?

Simulating a service call in an AngularJS controller

Unforeseen outcomes arise when toggling expansion in JavaScript

Trouble encountered with JSX in my custom React Library after transitioning to Preact

Navigate through the rows and columns of an HTML table by utilizing Javascript with webdriver, specifically for Protractor in a non-angular environment

Is it possible to have the background scroll downward while keeping some content centered in place at all times?

Guide on How to Retrieve the Following YouTube Video using a PHP Array