图片转 HTML 工具

IMG2HTML 可以把网页、App 界面甚至纸上草图的 JPG、PNG 或 WebP 图片，转成一个使用 Tailwind CSS 样式的 HTML 文件。布局、文字、颜色和图标都会重建为可编辑的代码，而不是作为图片贴进去。

  • 真实的文字、标题、按钮和列表，顺序与图片中一致。
  • 用 Tailwind 类处理间距和颜色，用 Font Awesome 做图标，照片用占位图代替。
  • 内置编辑器，可以用提示词修改，并导出为 React、Vue 或 Angular。
用 AI 转换图片 查看 4 个真实转换

每次转换消耗 1 个积分。最小的套餐是 3 积分的试用版，详见价格。

免费、即时、无需账号：把图片中的文字提取为一个简单的 HTML 文件。通过 OCR 在浏览器里运行，不会重建布局。

免费图片转 HTML（仅提取文字）

转换前后对比：4 个真实案例

下面每张图片都在 2026年9月23日发给了 IMG2HTML，返回的 HTML 未改一行，直接在 Chrome 里打开。截图是 upload-post.com 的真实页面，这是我们的姊妹产品；线框图照片、App 设计稿和设计稿 Frame 则是为本页用图像模型生成的。每个结果旁边都列出了做对的地方和仍需手动修改的地方。

一张纸质线框图的照片

纸上手绘的咖啡店网站线框图照片，店名“Northside Coffee”：导航栏、标题为“Slow coffee, fast mornings”的首屏区块、三个带价格的产品框，以及写有营业时间的页脚
输入： 手机拍摄的手绘线框图（JPG，1536 x 1152）
生成的 HTML 在浏览器中的效果：Northside Coffee 导航栏、带标题和“See the menu”按钮的首屏框、价格分别为 2.50、3.20 和 2.80 的三张产品卡片，以及营业时间
输出： 生成的 HTML 在 Chrome 中以 1280px 宽度渲染，未做任何修改。共 124 行 HTML，使用 Tailwind CSS，11 秒返回。

做对了什么

  • 草图里的每一段文字都在，顺序也一致：logo、三个链接、标题、按钮、三个产品名、价格和营业时间。
  • 布局也对：导航栏下方一条分隔线，带边框的首屏区块，一行三张等宽卡片，页脚一行居中。
  • 两种笔的颜色：黑色用于结构和文字，蓝色用于链接、按钮和价格。

需要手动修改的地方

  • 画叉的方框（线框图里表示图片的常见符号）变成了一张 placehold.co 图片，它的说明文字淡淡地显示在标题后面。换成你的真实照片即可。
  • 每个产品下面随手画的横线被转成了细装饰线。把它们换成你原本想写的描述。
coffee-wireframe.html（body 的开头几行）
 <body class="bg-white">
  <!-- Header -->
  <header class="max-w-6xl mx-auto px-4 py-6 flex justify-between items-center border-b-2 border-black mt-4">
   <div class="text-2xl font-bold tracking-widest">
    NORTHSIDE COFFEE
   </div>
   <nav class="space-x-8">
    <a class="text-blue-700 font-semibold tracking-wide hover:underline" href="#">
     MENU
    </a>
    <a class="text-blue-700 font-semibold tracking-wide hover:underline" href="#">
     VISIT
    </a>
    <a class="text-blue-700 font-semibold tracking-wide hover:underline" href="#">
     ORDER
    </a>
   </nav>
  </header>
  <!-- Hero Section -->
  <section class="max-w-6xl mx-auto px-4 mt-6">
   <div class="relative h-[500px] sketch-border flex flex-col items-center justify-center text-center bg-gray-50 overflow-hidden">
    <!-- Placeholder for Hero Image -->
    <img alt="A cozy coffee shop interior with wooden tables and natural light coming through large windows" class="absolute inset-0 w-full h-full object-cover opacity-20" src="https://placehold.co/1200x500?text=Cozy+Coffee+Shop+Interior+with+Natural+Light"/>
    <div class="relative z-10 px-4">
     <h1 class="text-5xl md:text-6xl font-bold tracking-tighter mb-8 uppercase">
      SLOW COFFEE,
打开完整的生成页面（124 行）

一张线上落地页的截图

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

一个移动 App 的设计稿

习惯打卡 App 首页设计稿：问候语“Good morning, Ana”、显示 5 个习惯完成 3 个的进度环、五行带复选框的习惯，以及包含 Today、Stats、Habits 和 Profile 的底部标签栏
输入： 移动 App 界面设计稿（PNG，864 x 1536）
生成的 HTML 以 390 像素宽度渲染：问候语、进度环、带勾选和未勾选方框的习惯列表，以及固定在底部的标签栏
输出： 生成的 HTML 在 Chrome 中以 390px 宽度渲染，未做任何修改。共 191 行 HTML，使用 Tailwind CSS，19 秒返回。

做对了什么

  • 问候语（名字用青绿色强调色）、日期和圆角摘要卡片。
  • 用 SVG 绘制的进度环，填充比例对应 5 个中的 3 个，旁边是“Keep going!”提示。
  • 五行习惯的勾选和未勾选状态都正确，底部标签栏使用 Font Awesome 图标，当前标签带下划线。

需要手动修改的地方

  • 每个习惯的 emoji 图标被写成了以 emoji 为文字的 placehold.co 图片，显示出来是空白方块。直接使用 emoji，或换成你自己的图标。
  • 标签栏固定在屏幕底部，但列表没有留出内边距，所以挡住了最后一个习惯。给列表加上与标签栏等高的底部内边距。
habit-app-mockup.html（body 的开头几行）
 <body class="text-[#0a2533] min-h-screen flex flex-col">
  <div class="max-w-md mx-auto w-full px-6 pt-12 pb-24 flex-grow">
   <!-- Header -->
   <header class="mb-8">
    <h1 class="text-4xl font-bold leading-tight">
     Good morning,
     <br/>
     <span class="text-[#006d6d]">
      Ana
     </span>
    </h1>
    <p class="text-[#708090] mt-2 text-lg">
     Tuesday, 23 September
    </p>
   </header>
   <!-- Progress Card -->
   <div class="bg-[#eef7f6] rounded-3xl p-6 mb-8 flex items-center">
    <div class="relative flex items-center justify-center w-32 h-32 mr-6">
     <svg class="w-full h-full">
      <circle class="text-[#d1e5e3]" cx="64" cy="64" fill="transparent" r="48" stroke="currentColor" stroke-width="10">
      </circle>
      <circle class="text-[#006d6d] progress-ring__circle" cx="64" cy="64" fill="transparent" r="48" stroke="currentColor" stroke-dasharray="301.59" stroke-dashoffset="120.63" stroke-linecap="round" stroke-width="10">
      </circle>
     </svg>
     <div class="absolute inset-0 flex flex-col items-center justify-center text-center">
      <span class="text-3xl font-bold text-[#006d6d]">
打开完整的生成页面（191 行）

一个导出为 PNG 的桌面端设计稿 Frame

发票应用 Ledgerly 的落地页设计稿：导航栏、标题“Send invoices in two clicks”、两个按钮，以及一张仪表盘卡片，里面有待收金额、柱状图和三张分别标为 Paid、Due、Overdue 的发票，下方是一排客户 logo
输入： 落地页设计稿 Frame（PNG，1536 x 864）
生成的 HTML 在浏览器中的效果：导航栏、双色标题、“Start free”和“Book a demo”按钮、带侧边栏、柱状图和彩色状态徽标发票列表的仪表盘卡片，以及一排客户 logo
输出： 生成的 HTML 在 Chrome 中以 1280px 宽度渲染，未做任何修改。共 320 行 HTML，使用 Tailwind CSS，23 秒返回。

做对了什么

  • 整个首屏：胶囊标签、双色标题、段落，以及实心和描边两种按钮，用的都是设计稿里的紫色。
  • 仪表盘卡片是真正的 HTML：带当前选中项的侧边菜单、待收金额、用 div 搭出来的柱状图，以及三行发票，Paid、Due、Overdue 徽标分别是绿色、橙色和红色。
  • 一排客户 logo，每个名称都是文字。

需要手动修改的地方

  • logo 都是替代品：Ledgerly 的标志是一个通用的叠层 SVG，Globex 和 Northwind 用了 Font Awesome 图标，Stark Industries 那一块用了页面里从未定义的 bg-dark 类，所以看不见。换成你自己的 SVG。
  • 胶囊标签里的闪光图标是 fa-sparkles，Font Awesome 5 免费版里没有这个图标，所以什么也不显示。
  • 在 1280 像素宽度下发票行很挤，INV-0042 折成了两行。给右侧列多留些空间，或者缩短日期列。
ledgerly-frame.html（body 的开头几行）
 <body class="min-h-screen">
  <!-- Navigation -->
  <nav class="max-w-7xl mx-auto px-6 py-6 flex items-center justify-between">
   <div class="flex items-center space-x-12">
    <div class="flex items-center space-x-2">
     <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
      <svg class="w-5 h-5" fill="white" viewbox="0 0 24 24">
       <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5">
       </path>
      </svg>
     </div>
     <span class="text-xl font-bold text-dark">
      Ledgerly
     </span>
    </div>
    <div class="hidden md:flex space-x-8 text-muted font-medium">
     <a class="hover:text-primary transition" href="#">
      Features
     </a>
     <a class="hover:text-primary transition" href="#">
      Pricing
     </a>
     <a class="hover:text-primary transition" href="#">
      Customers
     </a>
     <a class="hover:text-primary transition" href="#">
打开完整的生成页面（320 行）

如何把图片转成 HTML

  1. 选择图片。 原始尺寸的截图效果最好。裁掉浏览器工具栏和不属于设计的部分；模型会重建它看到的一切。
  2. 上传并转换。 第一个版本会在 10 到 30 秒内生成，并在编辑器中打开，附带页面的实时预览。
  3. 用提示词或手动调整。 用自然语言提修改要求（“把页头固定在顶部”、“改成深色背景”），或直接改代码；如果项目不用 Tailwind，可以把输出切换为内联 CSS、React、Vue 或 Angular。
  4. 替换占位图。 照片、logo 和品牌图标会以占位图的形式返回，并附上原来内容的描述。换成你自己的文件就完成了。

哪些图片转换效果好，哪些不好

落地页、仪表盘、价格表、表单、博客布局和 App 界面最接近原图，因为它们由文字、方框和图标组成，能直接对应到 HTML。图表会变成简单的 div 或 SVG 图形。插画、照片和自定义 logo 不会被描摹，而是变成占位图。很长的页面最好拆成每段一到两屏的区块，分别转换。

生成的 HTML 是给开发者的起点，而不是成品网站：需要检查间距、替换图片，并接上所有交互功能。和从零写同一个页面相比，每个标题、列表项和按钮文字都已经替你敲好了。

按图片类型转换

  • 截图转代码：重建你在浏览器里看到的页面，详细介绍 Upload-Post 示例。
  • 图片转代码：移动端和 App 设计稿，以习惯打卡 App 为例。
  • Figma 转 HTML：把 Frame 导出为 PNG 再转换。

已经有 HTML，想检查或整理一下？免费的 HTML 在线预览 可以按手机和桌面宽度预览，HTML 格式化 可以重新缩进。需要先从设计稿里拿到精确的品牌色？用 图片取色器。

图片转 HTML 常见问题

哪些图片格式可以转成 HTML？

PNG、JPG 和 JPEG、WebP、GIF 和 BMP。截图、设计稿导出图、手机拍的草图照片和扫描件都可以。图片里的文字越清晰，HTML 中变成真实文字的部分就越多。

具体会得到什么？

一个使用 Tailwind CSS 样式的 HTML 文件（从 CDN 加载），图标用 Font Awesome，原图中有照片或 logo 的地方用 placehold.co 占位图。每个占位图都有描述性的 alt 文本，告诉你那里应该放什么。

生成的 HTML 是响应式的吗？

布局使用 Tailwind 的 flex 和 grid 工具类，会适应屏幕，但模型是按图片的宽度来构建的。桌面截图得到的是桌面优先的页面；请检查移动端视图，按需调整断点。

可以输出纯 CSS、React 或 Vue，而不是 Tailwind 吗？

可以。转换完成后，在编辑器里可以把输出切换为内联 CSS 的 HTML、ReactJS、VueJS 或 AngularJS，也可以输入其他框架名。默认使用 Tailwind HTML，是因为这样文件是自包含的。

一次转换需要多长时间？

本页的 4 个示例通过 API 转换，每个用时 11 到 27 秒。内容多、文字密集的页面比简单页面耗时更长。

有没有免费把图片转成 HTML 的方法？

本页顶部的纯文字转换器是免费的，在浏览器里运行：它用 OCR 提取图片中的文字，并包进一个简单的 HTML 文件。要重建布局、颜色和组件，则需要使用消耗积分的 AI 转换器。

把你自己的图片转成 HTML

选择套餐，上传截图、设计稿或照片，一分钟内拿到 HTML。

查看套餐并转换