gpt4 book ai didi

html - 从图像生成 HTML map

转载 作者:技术小花猫 更新时间:2023-10-29 12:39:00 26 4
gpt4 key购买 nike

有没有一种方法可以自动生成具有非常独特边界的多边形对象(例如 map 上的国家/地区)的 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>

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

最佳答案

感谢您的帮助!

虽然 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();
}

关于html - 从图像生成 HTML map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/314181/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com