eduardolundgren / tracking.js

A modern approach for Computer Vision on the web
http://trackingjs.com
Other
9.43k stars 1.44k forks source link

How to identify and "tag" basic objects on the image? #180

Open dakipro opened 7 years ago

dakipro commented 7 years ago

I am looking for a simple way to tag the objects on the photo, without any recognition or logic or something, just give back the coordinates of the identified objects, something like http://answers.opencv.org/upfiles/13704196733713398.png looks very simple compared to the provided examples, outline (with squares) objects that differ from the background. Any clues where and how to start, which module to use?

Master244 commented 7 years ago

From what I see in the examples, most recognition functionalities involve faces etc. But what you are saying is not correct you can't let the computer see variable objects in images without any logic. If you mean you would want to draw those squares on that specific image. Then you can manage that with canvas and some basic drawing library.

Master244 commented 7 years ago

This example seems to get closest to what you are trying to achieve, https://trackingjs.com/examples/fast.html

Then you need some way to store the points and play with the threshold to really only get points from the outer edge and do some drawing on that.

dakipro commented 7 years ago

yeah, that is what I was considering, thanks. I figured I might ask if someone has already done something similar. Drawing itself should not be that difficult, I've found several JS solutions that draw rectangles on the image, but identifying initial position of the rectangle so that it "tags" some object could be a challenge. I was hoping that some solution already exists, or is easy to implement

dakipro commented 7 years ago

btw, it doesnt' need to identify what the object is, just to tag it, identification itself can be a manual process

Master244 commented 7 years ago

But what do you mean bij 'tag' it like the example with the faces where a square is drawn? Because I can write you something that just draws a square where you can move the x and y coordinates to move the box arround. But there's nothing dynamic about that example.

dakipro commented 7 years ago

Something like squares yes, end result should be something like the first image I posted http://answers.opencv.org/upfiles/13704196733713398.png by using for example this script http://www.jqueryscript.net/demo/Photo-Tagging-Plugin-jTag/demo/1.html

Idea is that user uploads one photo with several items in it on a uniform background, and just draws squares around individual items on the photo (tags items on the photo). I want script to help by drawing squares automatically, and then user can write text describing what is on the photo. Like when you upload photo on facebook, it puts squares around faces and you can "tag" someone. But instead of faces, it should put squares around any objects, like on the first photo.

What i did so far is to use this color recognition example https://trackingjs.com/examples/color_hello_world.html but instead of colors I convert image to grayscale and then identify black and white areas (thus identifying some objects on the photo). It is far from perfect, but I didn't have much time to play with it

Master244 commented 7 years ago

Can u share what you are working on? I'm working on something similar though I can't seem to find where I can alter the algorithm or add more data to improve the results.

SimoneS93 commented 7 years ago

If your background is plain (no texture), you could track your objects with an "inverse color tracker", with a test function like

// use range comparison in real code function(r, g, b) { return r !== backgroundR && g !== backgroundG && b !== backgroundB; }

This will give you coordinates and sizes of all the objects with a color different from the background.

dakipro commented 7 years ago

Well I literally need code to mark objects on some photos, like the example I mentioned. http://answers.opencv.org/upfiles/13704196733713398.png

User snaps a photo of "something" on some background (picture on the wall, phone on the desk) and uploads it to a website, then the script should start "squaring" tags around it like in the example above. Then it is up to user to fine tune tagging by dragging the squares and writing item names etc. What I did so far is to use colorTracker example on a grayscale image, by finding black and white portions of it, like this

` var demoContainer = document.querySelector('.demo-container');
tracking.ColorTracker.registerColor('white', function(r, g, b) { if (r > 230 && g > 230 && b > 230) { return true; } return false; }); tracking.ColorTracker.registerColor('black', function(r, g, b) { if (r < 60 && g < 60 && b < 60) { return true; } return false; }); var tracker = new tracking.ColorTracker(['white', 'black']);

  tracker.on('track', function(event) {
    event.data.forEach(function(rect) {
      window.plot(rect.x, rect.y, rect.width, rect.height, rect.color);
    });
  });

`

HA3APKO commented 7 years ago

Hello everyone, is it possible to add a rectangle with a tag to the face which was not recognized automatically? It is similar to the question which was asked by dakipro on 25 Sep