从图像生成HTML-Map

Question

有没有办法自动生成HTML-Map兼容的多边形对象坐标列表（例如地图上的国家/地区），边框非常独特？

示例图片：

Map of CEE countries 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中打开地图。如果是位图，请使用Path - ＆gt;跟踪位图以跟踪边缘。清理矢量数据以仅包含要在imagemap中显示的路径。保存文档，我建议使用POVRay文件。现在，您有一个纯文本格式的顶点列表（以及许多您不关心的标记或元数据）。从那里转换为必需的HTML语法仍然是一个问题，但并不像第一步那么复杂。

对于它的价值，有一个长期的功能请求，要求Inkscape包含一个导出HTML图像映射的选项。

Answer 3

我可以为您提供一个步骤：您将需要使用Sobel滤镜（通常在Photoshop等程序中称为边缘检测）。

之后，您需要找到所选语言的跟踪库。

Answer 4

我对Gerhard Dinhof的代码做了一些修改和实施。

PHP函数生成所提供的svg coord的图像映射。您可以指定调整区域大小的因子编号和x-y平移编号，以使地图与图像对齐。

<?php

/**
 * $str SVG coordinates string
 * $factor number that multiply every coordinate (0-1)
 * $x translation on the x-axis
 * $y translation on the y-axis
 */
function svg2imap($str, $factor=1, $x=0, $y=0) {

    $res = "";

    $str = str_replace(array(" M ","M ", " C "," z "," z"),array("M","M","C","",""), $str);

    $polygons = explode("M", $str);

    for($i=0; $i<count($polygons); $i++) {

        if($polygons[$i]!="") {

            $res .= "<area shape=\"poly\" coords=\"";

            $coordinates = explode("C", $polygons[$i]);

            foreach( $coordinates as $position ) {

                $noise = explode(" ", trim($position));
                $point = explode(",", $noise[0]);

                for($j=0; $j<2; $j++) {

                    $val = round( $point[$j]*$factor, 0);

                    if($j==0)
                        $res .= ($val + $x).",";
                    else
                        $res .= ($val + $y).",";
                }
            }
            $res .= "\" href=\"link.html\" alt=\"desc\" />";
        }
    }

    return $res = str_replace(",\"","\"", $res);;
}
?>


<?php

$svg = "M 6247.5037,5935.0511 C 6246.0707,5940.7838 6247.5037,5947.9495 C 6243.2043,5959.4149 z";

highlight_string( svg2imap($svg, $factor=0.33, $x=0, $y=0) );

?>

Answer 5

似乎“Gerhard Dinhof”功能不正确而且我在浪费时间。 在这里，您可以找到用c＃编写的修改版本，将简单的SVG文件转换为相关的html地图代码。 用法：MessageBox.Show（Svg2map（“c：\ test.svg”））

    // Sample file contents:
    // <?xml version="1.0" encoding="UTF-8" ?>
    // <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    // <svg width="739pt" height="692pt" viewBox="0 0 739 692" version="1.1" xmlns="http://www.w3.org/2000/svg">
    // <path fill="#fefefe" d=" M 0.00 0.00 L 190.18 0.00 C 188.15 2.70 186.03 5.53 185.30 8.90 L 0.00 0.00 Z" />
    // </svg>
    private string Svg2map(string svg_file_path)
    {
        string[] svgLines = File.ReadAllLines(svg_file_path);
        string svg = string.Join("", svgLines).ToLower();

        int temp;
        int w = int.Parse(ExtractData(svg,0,out temp, "<svg", "width").Replace("pt", "").Replace("px", ""));
        int h = int.Parse(ExtractData(svg, 0, out temp, "<svg", "height").Replace("pt", "").Replace("px", ""));

        StringBuilder stringToFile = new StringBuilder();
        stringToFile.AppendLine(string.Format("<img id=\"image1\" src=\"image1.jpg\" border=\"0\" width=\"{0}\" height=\"{1}\" orgwidth=\"{0}\" orgheight=\"{1}\" usemap=\"#map1\" alt=\"\" />", w, h));
        stringToFile.AppendLine("<map name=\"map1\" id=\"map1\">");

        byte dataKey1 = (byte)'a';
        byte dataKey2 = (byte)'a';

        int startIndex = 0;
        int endIndex = 0;
        while (true)
        {
            string color = ExtractData(svg, startIndex, out  endIndex, "<path", "fill");
            string svg_input = ExtractData(svg, startIndex, out endIndex, "<path", "d=");
            if (svg_input == null)
                break;

            startIndex = endIndex;

            /// Start..
            stringToFile.Append(string.Format("<area data-key=\"{0}{1}\" shape=\"poly\" href=\"targetpage.html\" alt=\"Description\" coords=\"", (char)dataKey1, (char)dataKey2));
            dataKey1 += 1;
            if (dataKey1 > (byte)'z')
            {
                dataKey2 += 1;
                dataKey1 = (byte)'a';
            }

            bool bFinished = false;
            while (!bFinished)
            {
                string[] points = new string[0];
                string pattern = "";
                svg_input = svg_input.ToUpper().Trim();
                char code = svg_input[0];
                switch (code)
                {
                    case 'M':
                    case 'L':
                        pattern = svg_input.Substring(0, svg_input.IndexOf(" ", svg_input.IndexOf(" ", svg_input.IndexOf(" ") + 1) + 1));
                        svg_input = svg_input.Remove(0, pattern.Length);
                        points = pattern.Trim().Substring(1).Trim().Split(' ');
                        break;
                    case 'C':
                        pattern = svg_input.Substring(0, svg_input.IndexOf(" ", svg_input.IndexOf(" ", svg_input.IndexOf(" ", svg_input.IndexOf(" ", svg_input.IndexOf(" ", svg_input.IndexOf(" ", svg_input.IndexOf(" ") + 1) + 1) + 1) + 1) + 1) + 1));
                        svg_input = svg_input.Remove(0, pattern.Length);
                        points = pattern.Trim().Substring(1).Trim().Split(' ');
                        break;
                    case 'Z':
                        bFinished = true;
                        continue;
                    default:
                        throw new Exception("Invalid pattern");
                }

                int count = points.Length;
                if (count > 4)
                    count = 4;
                for (int i = 0; i < count; i++)
                {
                    var valueParts = points[i].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("\" />");
        }

        // clean obsolete commas - not pretty nor efficient
        stringToFile.AppendLine("</map>");
        stringToFile = stringToFile.Replace(",\"", "\"");


        return stringToFile.ToString();
    }

    private string ExtractData(string data, int startIndex, out int endIndex, string key, string param)
    {
        try
        {
            endIndex = 0;
            int a = data.IndexOf(key, startIndex);
            int a2 = data.IndexOf(key, a + key.Length);
            if (a2 == -1)
                a2 = data.IndexOf(">", a + key.Length);
            int b = data.IndexOf(param, a + key.Length);
            int start = data.IndexOf("\"", b + param.Length) + 1;
            int end = data.IndexOf("\"", start + 1);
            if (b > a2 || start > a2 || end > a2)
                return null;
            int len = end - start;
            endIndex = end;
            string t = data.Substring(start, len);
            return t;
        }
        catch
        {
            endIndex = 0;
            return null;
        }
    }