截图转代码

截取你在浏览器里看到的页面，IMG2HTML 会写出重建它的 HTML 和 Tailwind CSS：导航、标题、按钮、列表和代码块都是真实、可编辑的代码。下面是对 upload-post.com 首页的一次真实转换，输出与返回时完全一致。

转换截图从 Chrome 直接截取

一张线上落地页的截图

Upload-Post 首页截图：带下拉菜单的导航栏、标题“Social Media API, One Call, Every Platform”、几排社交网络图标、一个显示 curl 命令的终端窗口，以及“Create your free account”按钮 — **输入：** upload-post.com 的浏览器截图（PNG，1280 x 800）

生成的 HTML 在浏览器中的效果：同样的导航栏、双色标题、社交图标、带 curl 命令的终端、功能列表、行动按钮和集成标签 — **输出：** 生成的 HTML 在 Chrome 中以 1280px 宽度渲染，未做任何修改。共 463 行 HTML，使用 Tailwind CSS，27 秒返回。

做对了什么

导航栏，包括下拉箭头、深色模式按钮、语言选择器和“Try for free”按钮。
双色标题、绿色计数徽标、带小图标的功能列表，以及“Create your free account”按钮。
终端窗口里 curl 命令的全部八行，都是可以编辑的真实文字，而不是图片。
来自 Font Awesome、一眼能认出的品牌图标：TikTok、Instagram、LinkedIn、YouTube、Facebook、Pinterest、Reddit、Discord、Telegram、Slack、Mastodon、WordPress、DEV 和 Google。

需要手动修改的地方

Font Awesome 5 里没有的品牌用了近似图标：X 显示的是旧的 Twitter 小鸟，Threads 是一个 @ 符号，Bluesky 是一朵云。换成官方 SVG 即可。
用户头像和国旗变成了 placehold.co 占位图（U1、U2、U3）。
图标排成了三行而不是两行，首屏也比原图略低一些，间距需要再调一遍。

upload-post-screenshot.html（body 的开头几行）

 <body class="text-slate-900">
  <!-- Navigation -->
  <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex items-center justify-between">
   <div class="flex items-center gap-2">
    <div class="bg-indigo-600 p-1.5 rounded-lg">
     <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
      </path>
     </svg>
    </div>
    <span class="text-xl font-extrabold tracking-tight">
     Upload-Post
    </span>
   </div>
   <div class="hidden md:flex items-center space-x-8 text-sm font-medium text-slate-600">
    <a class="hover:text-indigo-600" href="#">
     Add to your SaaS
    </a>
    <div class="flex items-center gap-1 cursor-pointer hover:text-indigo-600">
     Platforms
     <i class="fas fa-chevron-down text-[10px]">
     </i>
    </div>
    <div class="flex items-center gap-1 cursor-pointer hover:text-indigo-600">
     Integrations
     <i class="fas fa-chevron-down text-[10px]">

打开完整的生成页面（463 行）

怎样截图转换效果最好

模型会重建图片里的所有东西，所以截图越干净，事后要删的就越少。上面的 Upload-Post 截图是在关闭 Cookie 提示条后以 1280 x 800 截取的；如果提示条还开着，它也会被一起重建。

Chrome 或 Edge： 打开 DevTools（F12），按 Ctrl+Shift+P（Mac 上是 Cmd+Shift+P），运行 Capture screenshot 截取可见区域，或在 Elements 面板里选中一个区块后运行 Capture node screenshot。不带浏览器工具栏，也不会缩放。
macOS： 按 Cmd+Shift+4 拖选需要的部分，或再按空格键截取单个窗口。
Windows： 按 Win+Shift+S 打开截图工具栏；截图会进入剪贴板，可以从通知中保存。

浏览器保持 100% 缩放和正常的桌面宽度（1280 到 1440 像素）。先关掉 Cookie 提示条、聊天气泡和弹窗。页面较长时，把首屏、功能网格和页脚分别截成单独的图片。

从截图到可用的页面

上传截图。这个示例的转换用了 27 秒。
对照原图检查预览。这次转换中，布局、文案和 curl 命令都是对的；X、Threads 和 Bluesky 的图标需要替换。
在编辑器里用自然语言提修改要求，或直接改代码。然后把占位图（这里是头像和国旗）换成你的文件。
导出为 Tailwind HTML；如果页面要放进应用里，也可以切换为 React 或 Vue。

应用和设计稿的截图

截图不一定来自网站。桌面软件界面、管理后台和邮件模板的截图也能用同样的方式转换。移动端界面和设计稿请看图片转代码；从设计工具导出的 Frame 请看 Figma 转 HTML。四个真实示例的并排对比都在图片转 HTML页面。

如果你已经有页面的 HTML，只是想看看效果，免费的 HTML 在线预览可以按手机、平板和桌面宽度渲染。

截图转代码常见问题

截图会被转成什么代码？

一个 HTML 文件，使用 Tailwind CSS 工具类、Font Awesome 图标，以及一个接近图片中字体的 Google Font（本站四个示例返回的都是 Inter）。在编辑器里可以切换为内联 CSS、React、Vue 或 Angular。

它会复制页面的图片和交互行为吗？

不会。照片、头像和 logo 会变成带描述的占位图，菜单、下拉框和标签页会重建为静态代码。四个示例的输出中，除了 Tailwind CDN 脚本，没有任何 JavaScript。

应该用整页长截图吗？

把长页面拆成一到两屏的区块，逐个转换。本站每个示例都是单屏截图，区块短一些，对照原图检查也更快。

任何网站都能这样转换吗？

请只用于你自己拥有或获准复制的页面和设计。结果是对截图内容的重建，而不是原网站的源代码。