Count of black pixels that have been plotted on the web image

Question

I want the user to trace a line in a biometric image and make an automatic count of "black parts" of the digital that this line crossed.

I have no idea which tool to use and where to start... Someone has some way?

It is for web environment...

Answer 1

Explanation

You can use php itself to do this, you don’t need to use javascript if you don’t want, I made an example manipulating and creating an image of only two colors that I used for testing (black and white) and modelling it on html itself again with a scale of 10 pixels by 10 pixels.

Code

<style>
    .container {
        height: 10px;
        width: 100px;
    }
    .bloco {
        width: 10px;
        height: 10px;
        display: block;
        float: left;
    }
    .preto {
        background: black;
    }
    .branco {
        background: white;
    }
</style>
<?php
$image = imagecreatefrompng('biometria.png'); //aqui é o caminho da imagem
$IniX = 0;  //inicio largura
$FimX = 10; //dimensão de largura da imagem
$IniY = 0;  //inicio altura
$FimY = 10; //dimensão de altura da imagem
$codigoCorPreta = 0; //se for rgb(0,0,0) é zero. porém nem todo preto é realmente preto.
$pxPreto = 0; //qtd. de pixels pretos zerada inicialmente
for ($y = $IniY; $y < $FimY; $y++ ) {
    echo '<div class=container>'; //container para envolver cada linha horizontal
    for($x = $IniX; $x < $FimX; $x++ ) {
        $value = imagecolorat($image, $x, $y);
        if ($value === $codigoCorPreta){ 
        //se a cor no pixel atual for totalmente preta vai entrar aqui mas tbm poderia ser '($value < 9000000)' por exemplo para captar mais tons de preto.
            $cor = 'preto';
            $pxPreto++; //incrementa qtd de pixels pretos
        } else {
            $cor = 'branca';
        }
        echo "<div class='bloco {$cor}'></div>"; //cria uma div de 10x10 simulando 1 pixel com a cor branca ou preta.
    }
    echo '</div>';
}
echo "Total de pixels pretos: {$pxPreto}"; //aqui imprime a quantidade total de pixels pretos que foi percorrido.
?>

Results

This is the image I used as an example to "biometria.png"

And this was the result obtained in HTML generated by PHP:

"Real tests" on a biometric image:

Example image:

In this test I used if ($value < 9000000){ to check if "black or not" in order to cover more shades of black and not only rgb(0,0,0)

Results:

Remarks

The value I used ($value < 9000000) was only for testing, I can’t tell you if this would be a "plausible" value to identify black tones.

If the image you want to work on is jpg you must change the function imagecreatefrompng for imagecreatefromjpeg.

Answer 2

Taking as example the Imagecolorpicker project(https://github.com/Skarabaeus/ImageColorPicker/).

https://github.com/Skarabaeus/ImageColorPicker/blob/master/src/ImageColorPicker.js line80

... .bind("mousemove", function(e){
   ...
      /*Aqui coloque sua lógica - (toda vez que q o pixel for da cor */
      /* que vc determinar incrementa um contador). */
   ...
});...