Delphi: How to tag photos the way facebook does.

Question

I need a way to tag photos in a Delphi desktop application the way Facebook does it.

That includes some way to easily add the tags over the people, and then hovering the mouse over the person in the photo to show the tag.

The two suggestions in the answer given to: "Delphi Components for Face Identification and Tagging" don't solve this.

But I have no idea where to start, and have been unable to find ideas on the web on how to do this. How does Facebook do it? Or maybe there's a component for Delphi that will allow it.

What would be the best way to try to implement Facebook-like tagging?

---

p.s. This is some of Facebook's API definition for this: http://wiki.developers.facebook.com/index.php/Photos.addTag

Here is a Java program that implements the face tagging functionality that I want to do in my Delphi app: fb-photo-uploader

Answer 1

I'm a bit confused as to your question. Are you trying to interact with Facebook or just copy the functionality?

If you are trying to copy the functionality: You should be able to just display the image, let the user select the rectangle, possibly copy the image to a new copy to notify the other person with, and apply a tag in a DB. Some helpful links: here is a select image example and here is the copy image portion example. I'd actually think you could do the select image in a paintbox but haven't actually played with one of those in forever.

If you are trying to access the API: The .NET interface may work for you. From what I can tell, there is no COM interface so you'd have to write your own connector or use a .NET Delphi app. Note: all of this information is coming from Google so I won't swear up and down that it's really the current state of things. The only other Facebook API request I saw was from 2007.

If you want to do automatic face recognition, OpenCV from the referenced question looks like a decent way to do it (especially if you have access to C++ Builder).

Answer 2

The key parameters of the API you cited are the picture ID, the coordinates, and the tag. The tag can be either the user ID of a Facebook user, or it can be free-form text (for the case when the tagged subject is not a Facebook user). Facebook uses just one coordinate because it uses fixed-size regions to denote a tagged area; the idea is that you click on the center of a person's face, and Facebook just stores that point.

If you display a picture in a TImage control (that's the obvious first choice, after all), you can detect mouse clicks with the OnMouseDown and OnMouseUp events. (The OnClick event is simpler, but doesn't tell you the coordinates.) Once you've acquired a point, prompt for a label to accompany that point. You can use predetermined labels, like Facebook's user IDs, or just use ordinary text, or use something of your own devising. The question of what you use to represent a tag value is orthogonal to whatever other questions you've asked so far.

The other half of Facebook's photo tagging is that moving the mouse over the image displays the tag text over the image, and moving the mouse over the labels below highlight the associated regions. Handle OnMouseMove events and write some code to display or hide labels and shapes as appropriate. If you use TLabel and TShape, you might not even have to modify the image, but showing those controls on top of the image might interfere with further OnMouseMove events for the image. It shouldn't take too long to try some experiments and see what works for you.

Answer 3

lkessler, I just read your reply to Marshall Fryman, so may have a couple options for you:

THotSpotImage - If you already have TMS components...

ImageEn - in case you already have them...

See w2m's answer #3 i think in further i need get all inner pixels of my selections, so how i can save my selections/objects ?

Save selection just saves the selection itself. It does not save the image inside of the selection:

procedure SaveSelectionToFile(const FileName:string); SaveSelectionToFile saves the current selection to the specified file. Example ImageEnView1.Select(10,10,100,100); ImageEnView1.SaveSelectionToFile('selection1'); .. sel1.Position:=0; ImageEnView1.LoadSelectionFromFile('selection1'); // this is like Select(10,10,100,100)

Answer 4

In the Graphic32-library, you can have several layers upon each other in a image. One of the layers that is provided out of the box, is a TRubberbandLayer that allows the user to reposition/resize the layer at runtime.

The mousemove event for the TImage32-component, has a parameter that gives the layer currently under the cursor.

type TImgMouseMoveEvent = procedure(Sender: TObject; Shift: TShiftState; X, Y: Integer; Layer: TCustomLayer) of object;

A combination of rubberbandlayers and the mousemove-event should be good solution, I think.