Tag images in the image itself? HOW-TO

Question

How to tag images in the image itself in a web page?

I know Taggify, but... is there other options?

Orkut also does it to tag people faces... How is it done?

Anyone knows any public framework that is able to do it?

See a sample bellow from Taggify:

Answer 1

I know this isn't javascript but C# 3.0 has an API for doing this. The System.Windows.Media.Imaging namespace has a class called BitmapMetadata which can be used to read and write image metadata (which is stored in the image itself). Here is a method for retrieving the metadata for an image given a file path:

public static BitmapMetadata GetMetaData(string path)
{
    using (Stream s = new System.IO.FileStream(path, FileMode.Open, FileAccess.ReadWrite, FileShare.ReadWrite))
    {
        var decoder = BitmapDecoder.Create(s, BitmapCreateOptions.None, BitmapCacheOption.OnDemand);
        var frame = decoder.Frames.FirstOrDefault();
        if (frame != null)
        {
            return frame.Metadata as BitmapMetadata;
        }
        return null;
    }
}

The BitmapMetadata class has a property for tags as well as other common image metadata. To save metadata back to the image, you can use the InPlaceBitmapMetadataWriter Class.

Answer 2

There's a map tag in HTML that could be used in conjunction with Javascript to 'tag' different parts of an image.

You can see the details here.

Answer 3

I will re-activate this question and help a bit. Currently the only thing i have found about is http://www.sanisoft.com/downloads/imgnotes-0.2/example.html . A jQuery tagging implementation. If anyone knows about another way please tell us.

;)