有没有办法将图像中的 GUI 转换为 html？答案

【问题标题】：Is there a way to convert GUI in image to html?有没有办法将图像中的 GUI 转换为 html？
【发布时间】：2010-11-05 18:23:02
【问题描述】：

我有这个来自设计团队的 GUI 屏幕截图，我需要将其转换为网页，而不是什么。我正在考虑找到一些类似于 GUI 的网站，这样我就可以复制和粘贴 html，这样我就不必从头开始了。这种方法的唯一缺点是我不知道哪个网站实际上看起来像那样，所以这可能意味着很多浏览时间。呵呵。

所以只是想知道是否有工具可以帮助我进行搜索？或者如果有一个工具可以将图像转换为等效的html网页，那就更好了。

我想我只是另一个懒惰的没有创造力的程序员，试图快速而肮脏地完成 gui 部分，呵呵。

谢谢。

【问题讨论】：

我不认为将图像转换为 HTML 需要付出代价
我不知道你为什么称自己为“没有创造力的程序员”。您的设计团队已经完成了“创意”部分，您所要做的就是实现它。不过，“懒惰”听起来是对的 ;-) 如果这种特性在公司中存在，我会问你的设计师他们抄袭了哪个网站。否则 Dreamweaver 或 Expression Blend 之类的东西可能会有所帮助。
嘿嘿，把perl的主要价值观跟核心:)

标签： html user-interface image converter

【解决方案1】：

您的意思是您有一个 PNG、GIF 或 JPG 屏幕截图...并且您希望将其输入到程序中并让它吐出一组 HTML 和 CCS，在浏览器中查看时看起来就像那样图片？

很抱歉打破了你的泡沫，但如果是这样的话，我会非常、非常、非常惊讶。

这基本上是不可能的。如果您在屏幕上看到一个框，它可能是文本区域、div、td、gif 或 15 种不同事物中的任何一种。程序根本无法确定要使用哪个 HTML 元素。

很抱歉，您将不得不自己编写 HTML。如果您是 HTML 新手，Dreamweaver 之类的工具将有助于加快这一过程。但我敢打赌，地球上没有任何东西可以让这项工作自动化。

不是你想要的答案，抱歉。但这就是答案。

【讨论】：

呵呵，是的，但那两秒钟，梦想是值得的。 :)
Dreamweaver - 不会完全自动化它 - 但它允许您选择图像的部分并指定它们是文本区域还是图像区域 - 图像区域被剪切并以 HTML 布局并且文本区域留给您输入文本。我从未提到过自动化 - 但我认为这是一个快速的过程，并且尽可能接近自动化。
Grouchal 的想法是这个问题的最佳答案。你想偷懒吗？ Dreamweaver/Fireworks 会通过吐出大量表格来作弊，然后您只需在其中添加文本并使其可编辑。它不是最漂亮的 HTML，但 OP 似乎并不关心 HTML 的质量。任何关心的人都不会问这个问题:)

【解决方案2】：

我很确定您可以使用 Adobe Dreamweaver 来做到这一点 - 从设计到 HTML。

【讨论】：

嗯，是时候将 Dreamweaver 和操作指南放入 google 以再次使用，谢谢。

【解决方案3】：

您提到他们使用 Fireworks 进行设计。是Adobe Fireworks 吗？如果是这样，该应用程序可以选择为您将设计输出为 HTML。

来自功能列表：

设计一次，部署到多个平台

将 Fireworks 设计输出为 HTML 或您选择的应用程序：Adobe Flash、Adobe AIR™ 或 Adobe Flex®。使用出色的设计工具制作自定义皮肤。现在您的工具可以很好地协同工作。在 Fireworks 中进行设计，然后将符合标准的基于 CSS 的布局（包括外部样式表）导出到 Dreamweaver CS4。在 Fireworks 中创建用于 Adobe Flex Builder™ 软件的组件。直接从 Fireworks 创建基于 HTML 的 Adobe AIR 原型。

【讨论】：

【解决方案4】：

我不知道有任何工具可以将 GUI 的图像转换为等效的 HTML。我想这将非常依赖于 GUI 的样式。最重要的是，它可能会产生一些非常讨厌且难以维护的 HTML。

这可能不是你想听到的答案，但我会开始编码。

设计团队是否使用 HTML 进行设计？ Photoshop模型？这两种方法都可以让您更好地避免手工编码时间。

【讨论】：

不，已经和他们核实过了，他们用他们疯狂的烟花技能做到了。所以我只能自生自灭:(

【解决方案5】：

截图？

你可能不想这样做。您可能至少希望将文件保存为 jpeg 或 png 或任何格式，最好不压缩，以免质量下降。

然后你就可以切片了。谷歌“photoshop 切片教程”会出现。

最好的情况是，您需要 PSD 文件，然后您可以将其向上滑动并隐藏/显示您不想要的图层等。

【讨论】：

是的，但到了最后的开发时间，我仍然需要努力设置整个 html 等，所以我在想办法作弊，一定是我说话的 perl 程序员:P
如果你在 photoshop 中切片，你可以将它保存为 HTML。我的意思是，从屏幕截图中执行此操作是一个糟糕的选择，因为您可能会失去质量。您想使用 PSD 或原始 JPG/PNG 文件执行此操作:)
因为我将“屏幕截图”一词解释为有人按下“prt scrn”，打开 mspaint，粘贴并保存。