我用AI做了一个AI生成封面卡片的功能

重生学毕业设计
34 阅读2分钟

​

一键生成封面卡片

在产品展示、博客分享、应用列表、甚至是 API 文档页中，封面卡片（Cover Card）  已成为视觉呈现和内容摘要的关键元素。无论是展示用户生成内容，还是在社交平台分享时自动生成预览图，卡片化的视觉呈现都能显著提升点击率与识别度。

但开发者常常面临一个问题：如何让这些卡片既灵活可定制，又能在各种尺寸下稳定渲染？

手动拼 HTML、调样式、截屏导出、适配响应式布局，这些都费时费力。而当内容动态生成（比如文章标题、封面、标签等）时，这个流程更像是一场无休止的重复劳动。

于是，我们设计了一个简洁高效的解决方案 —— HtmlPreview：一键生成可视化封面卡片的 React 组件。下面就是生成的效果，可以看到这是一个非常好看的封面卡片，使用地址在：tools.anqstar.com/tools/image…，有时间可以去体验一下

功能与原理

HtmlPreview 的核心理念是将 HTML 内容直接渲染在一个可控的预览容器中，同时保持 Tailwind CSS 的强大样式能力。

它的结构非常轻巧，但功能完整：

const HtmlPreview = forwardRef<HTMLDivElement, { html: string; width: number; height: number }>(({ html, width, height }, ref) => {
  const createFullHtml = (content: string) => `
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="h-full">${content}</div>
</body>
</html>`;

  return (
    <div className="flex justify-center">
      <div
        ref={ref}
        className="border overflow-hidden bg-white shadow-lg"
        style={{ width: `${width}px`, height: `${height}px` }}
      >
        {html && <iframe srcDoc={createFullHtml(html)} className="w-full h-full" />}
      </div>
    </div>
  );
});

这里有几个值得注意的技术点：

  • iframe + srcDoc 技术：将传入的 HTML 字符串在独立的上下文中渲染，避免污染父页面样式，同时支持完整的 Tailwind 功能。
  • 动态样式隔离：使用内嵌 <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4">，无需本地构建 Tailwind 环境即可动态应用样式。
  • Ref 可访问性：通过 forwardRef 传递引用，开发者可以轻松获取卡片的 DOM 节点，用于截图、导出图片等操作。
  • 全响应式尺寸控制：通过 width 与 height 参数灵活设定渲染区域，适配不同封面需求（如 1200x630 的社交分享图）。

三步实现你的专属封面卡片

  1. 安装与引入组件
    将 HtmlPreview 组件引入你的 React 项目中，无需额外依赖。

    import HtmlPreview from './HtmlPreview'

  2. 编写 HTML 内容
    你可以使用任何符合 HTML 规范的内容字符串，也可以内嵌 Tailwind 样式：

    const html = `
  <div class="flex flex-col items-center justify-center h-full bg-blue-100">
    <h1 class="text-3xl font-bold text-blue-600">我的博客封面</h1>
    <p class="text-gray-500 mt-2">技术分享 · 高效工具</p>
  </div>
`;

  3. 渲染并生成卡片

    <HtmlPreview html={html} width={800} height={400} />

    这样，一个优雅的封面卡片就能实时渲染在浏览器中。你甚至可以搭配 html-to-image 或 dom-to-image库，将其一键导出为图片文件，用于社交分享或项目展示。

​

avatar
文章
阅读
粉丝