从图像生成HTML-Map

Question

有没有办法自动生成一个HTML-Map兼容的多边形对象坐标列表(例如地图上的国家),边界非常独特？

示例图片:

中东欧国家地图http://www.bankaustria.at/landkarten/CEE_2007_w524.jpg

最终输出:

<map id ="ceemap" name="ceemap">
    <area shape="poly" coords="149,303,162,301,162,298,171,293,180,299,169,309,159,306,148,306,149,303" href="austria.html" target ="_blank" alt="Austria" />       
    <!-- ... -->
</map>

提取多边形选择坐标的任何工具/脚本都会有所帮助.

Answer 1

谢谢你的帮助!

尽管Jonathans暗示使用Sobel滤镜肯定会起作用,但我选择了Sparrs方法,首先将位图转换为矢量图像(通过Inkscape),然后处理SVG文件.在研究了SVG规范的一些基础知识之后,很容易提取所需的HTML图像映射 - 来自所有其他垃圾的X/Y坐标并生成合适的代码.

虽然这不是火箭科学,但有人可能会发现这段代码很有用:

// input format: M 166,362.27539 C 163.525,360.86029 161.3875,359.43192 161.25,359.10124 C ...
private static void Svg2map(string svg_input)
{
    StringBuilder stringToFile = new StringBuilder();

    // get rid of some spaces and characters
    var workingString = svg_input.Replace("z", "").Replace(" M ", "M").Replace(" C ", "C");
    // split into seperate polygons
    var polygons = workingString.Split('M');
    foreach (var polygon in polygons)
    {
        if (!polygon.Equals(String.Empty))
        {
            // each polygon is a clickable area
            stringToFile.Append("<area shape=\"poly\" coords=\"");
            // split into point information
            var positionInformation = polygon.Split('C');
            foreach (var position in positionInformation)
            {
                var noise = position.Trim().Split(' ');
                // only the first x/y-coordinates after C are relevant
                var point = noise[0].Split(',');
                foreach (var value in point)
                {
                    var valueParts = value.Split('.');
                    // remove part after comma - we don't need this accurancy in HTML
                    stringToFile.Append(valueParts[0]);
                    // comma for seperation - don't worry, we'll clean the last ones within an area out later
                    stringToFile.Append(",");
                }
            }
            stringToFile.AppendLine("\" href=\"targetpage.html\" alt=\"Description\" />");
        }
    }
    // clean obsolete commas - not pretty nor efficient
    stringToFile = stringToFile.Replace(",\"", "\"");

    var fs = new StreamWriter(new FileStream("output.txt", FileMode.Create));
    fs.Write(stringToFile.ToString());
    fs.Close();
}

Answer 2

在Inkscape中打开地图.如果是位图,请使用"路径" - >"跟踪位图"来跟踪边缘.清理矢量数据以仅包含要在imagemap中显示的路径.保存文档,我建议使用POVRay文件.现在,您有一个纯文本格式的顶点列表(以及许多您不关心的标记或元数据).从那里转换为必需的HTML语法仍然是一个问题,但并不像第一步那么复杂.

对于它的价值,Inkscape有一个长期的功能请求,包括一个导出HTML图像映射的选项.