从图像生成HTML映射

是否有一种方法可以自动生成与HTML地图兼容的多边形对象（例如地图上的国家）坐标列表，这些对象具有非常独特的边界

示例图像：

最终输出：

<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>

---

任何提取类似多边形选择的坐标的工具/脚本都会很有帮助。

我可以给你一个步骤：你需要使用Sobel过滤器（在Photoshop等程序中通常称为边缘检测）

---

之后，您将需要使用您选择的语言查找跟踪库。

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

值得一提的是，Inkscape长期以来一直要求提供导出HTML图像地图的选项。

感谢您的帮助

尽管乔纳森提示使用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();
}

//输入格式：M 166362.27539 C 163.525360.86029 161.3875359.43192 161.25359.10124 C。。。
私有静态void Svg2map（字符串svg_输入）
{
StringBuilder stringToFile=新建StringBuilder（）；
//去掉一些空格和字符
var workingString=svg_input.Replace（“z”，“M”）。Replace（“M”，“M”）。Replace（“C”，“C”）；
//分割成单独的多边形
var polygons=workingString.Split（'M'）；
foreach（多边形中的变多边形）
{
如果（！polygon.Equals（String.Empty））
{
//每个多边形都是可单击的区域
Append（我对Gerhard Dinhof的代码做了一些更改和实现

PHP函数生成所提供svg坐标的图像映射。您可以指定调整区域大小的因子编号和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) );

?>


似乎“Gerhard Dinhof”函数不正确，我在这上面浪费了时间。
在这里，您可以找到一个用c#编写的修改版本，用于将简单的SVG文件转换为相关的html映射代码。
用法：MessageBox.Show（Svg2map（“c:\test.svg”））

//示例文件内容：
// 
// 
// 
// 
// 
私有字符串Svg2map（字符串svg_文件_路径）
{
字符串[]svgLines=File.ReadAllLines（svg\u文件\u路径）；
string svg=string.Join（“，svgLines.ToLower（）；
内部温度；
int w=int.Parse（提取数据（svg，0，out temp，）这对UngScVaP的SVG来说并不是很好。它完全是丑陋的代码。不要发布这个网站，它是用来帮助人们的。尴尬的是我无法识别它是什么语言，只是看它。这个故事“var”表示JavaScript，但是标题看起来更像是C++或java。T。它是C？？？？
    // 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;
        }
    }