芋头小宝：Browserless+n8n ：长文本蜕变为绝美「文字卡片」的超强组合！

芋头小宝：Browserless+n8n ：长文本蜕变为绝美「文字卡片」的超强组合！ 芋头小宝：Browserless+n8n ：长文本蜕变为绝美「文字卡片」的超强组合！ Modified November 2, 2025 • 曹冲称象儿童版 四、延伸思考&下期预告 Q1: 一张 HTML 内容太长，我想像长图一样分段截屏，怎么办？ 方案 A（推荐） ：通过 AI 节点生成多段完整的 html，通过 code 节点处理为多 items 结构，最后用 browserless 循环处理每个 html。 方案 B: 把请求 Body 里的 fullPage 设为 false ，然后多请求几次，每次配合不同的 clip 参数（ "clip": {"x": 0, "y": 0, "width": 1024, "height": 800} ）来截取不同区域，最后在 n8n 里用 Merge 节点把图片拼接起来即可。 Q2: 如何给 HTML 增加背景图片元素 方案 A： HTTP Request（下载网图） → Move Binary Data（转 JSON） → {{$json.data}} 拼到 background url（'data:image/webp；base64,{{$json.data}}') 方案 B： Browserless 截图 调用绘图大模型生成插图 n8n edit Image 叠加层次 后续相关教程预告： 1. MinIO 文件存储：工作流产出的文件如何落地与回收？如何接入 n8n / Dify？ 2. 端到端链路：前端/后端/Agents（n8n、Dify、Coze）/Browserless/MinIO/数据库，如何一站式打通、提升用户体验？ 评论区告诉我你想学什么；点赞最高的主题，我下期优先更新。让我们一起成为新时代的 GenAI 共生人。 我是芋头小宝，关注我，持续带你探索GenAI的成长宇宙。 【相关文章推荐】 n8n AI Builder 深度实测：是神器还是鸡肋？(附玩法提示词与避坑指南) Veo3.1最新功能测评合集&无缝对接n8n详细教程 8 天搭建个人AI产品网站，探索AI超级个体的第一份答卷 「不踩不捧」Coze, Dify, n8n 三大智能体搭建平台的深度解析与对比——来自AI智能体一线从业者的经验分享 Coze 开源了，但 n8n 仍是我心中的“白月光”——核心功能对比测评，小白也能 5 分钟看懂怎么选 还在手动搬运公众号内容？教你 3 步用 n8n 批量自动化迁移文案到 WordPress站点！ n8n AI Builder 深度实测：是神器还是鸡肋？(附玩法提示词与避坑指南) Veo3.1最新功能测评合集&无缝对接n8n详细教程 8 天搭建个人AI产品网站，探索AI超级个体的第一份答卷 「不踩不捧」Coze, Dify, n8n 三大智能体搭建平台的深度解析与对比——来自AI智能体一线从业者的经验分享 Coze 开源了，但 n8n 仍是我心中的“白月光”——核心功能对比测评，小白也能 5 分钟看懂怎么选 还在手动搬运公众号内容？教你 3 步用 n8n 批量自动化迁移文案到 WordPress站点！ • 曹冲称象儿童版 四、延伸思考&下期预告 Q1: 一张 HTML 内容太长，我想像长图一样分段截屏，怎么办？ 方案 A（推荐） ：通过 AI 节点生成多段完整的 html，通过 code 节点处理为多 items 结构，最后用 browserless 循环处理每个 html。 方案 B: 把请求 Body 里的 fullPage 设为 false ，然后多请求几次，每次配合不同的 clip 参数（ "clip": {"x": 0, "y": 0, "width": 1024, "height": 800} ）来截取不同区域，最后在 n8n 里用 Merge 节点把图片拼接起来即可。 Q2: 如何给 HTML 增加背景图片元素 方案 A： HTTP Request（下载网图） → Move Binary Data（转 JSON） → {{$json.data}} 拼到 background url（'data:image/webp；base64,{{$json.data}}') 方案 B： Browserless 截图 调用绘图大模型生成插图 n8n edit Image 叠加层次 后续相关教程预告： 1. MinIO 文件存储：工作流产出的文件如何落地与回收？如何接入 n8n / Dify？ 2. 端到端链路：前端/后端/Agents（n8n、Dify、Coze）/Browserless/MinIO/数据库，如何一站式打通、提升用户体验？ 评论区告诉我你想学什么；点赞最高的主题，我下期优先更新。让我们一起成为新时代的 GenAI 共生人。 我是芋头小宝，关注我，持续带你探索GenAI的成长宇宙。 【相关文章推荐】 n8n AI Builder 深度实测：是神器还是鸡肋？(附玩法提示词与避坑指南) n8n AI Builder 深度实测：是神器还是鸡肋？(附玩法提示词与避坑指南) Veo3.1最新功能测评合集&无缝对接n8n详细教程 Veo3.1最新功能测评合集&无缝对接n8n详细教程 8 天搭建个人AI产品网站，探索AI超级个体的第一份答卷 8 天搭建个人AI产品网站，探索AI超级个体的第一份答卷 「不踩不捧」Coze, Dify, n8n 三大智能体搭建平台的深度解析与对比——来自AI智能体一线从业者的经验分享 「不踩不捧」Coze, Dify, n8n 三大智能体搭建平台的深度解析与对比——来自AI智能体一线从业者的经验分享 Coze 开源了，但 n8n 仍是我心中的“白月光”——核心功能对比测评，小白也能 5 分钟看懂怎么选 Coze 开源了，但 n8n 仍是我心中的“白月光”——核心功能对比测评，小白也能 5 分钟看懂怎么选 还在手动搬运公众号内容？教你 3 步用 n8n 批量自动化迁移文案到 WordPress站点！ 还在手动搬运公众号内容？教你 3 步用 n8n 批量自动化迁移文案到 WordPress站点！ 🔗 原文链接： https://mp.weixin.qq.com/s/nTYRyyFW8NiL9yJwHneHPw 原创 芋头小宝 GenAI共生人2025年11月1日 20:58 美国 最近遇到一个棘手的问题，客户提出需要对文字卡片进行风格优化（如采用手绘风格、字体颜色标注等），而之前的文字卡片主要是通过 Edit Image 节点进行图层叠加而来的，机械且繁琐，根本架不住客户一会儿一个样式的个性调整。 我看着这个“毫无生机”的工作流，脑子只有俩字： 重构！ 可是，怎么重构？ 仔细想一想，其实个性化的样式更适合用HTML来实现，如果找到一个工具把文字内容变成 HTML+CSS， 接着再把 HTML 变成图片，那不就能为所欲为了吗？ 确定方案后，我开始在全网疯狂寻找相关工具，最终，我找到了它—— Browserless ：一个堪称“小众宝藏”的开源神器！ 它完美解决了我的所有痛点： • 可本地化部署，API 调用稳定丝滑！ • 完全免费，再也不用担心预算燃烧！ • 数据存储在自己服务器，隐私安全感拉满！ 简单来说，你把设计好的 HTML 代码扔给它，它就能渲染出精美的网页截图或 PDF，直接实现从文字到文字卡片的一键生成！ 今天这篇超长干货，你将获得： 1. Browserless 是什么？它能帮你做什么？ 2. 三分钟搞定！如何本地化部署 Browserless？ 3. 王炸组合！如何在 n8n 中调用 Browserless 实现自动化文字转图片？ 4. 请看以上三点，学不会？ 私信我手把手免费教你！ 一、神器揭秘：Browserless 到底是个啥？ 一句话概括 ：Browserless 就是一个把 Chrome 浏览器塞进 API 里的“无头浏览器即服务”。 你不需要在本地安装和维护浏览器，只要给它发送一个 HTTP 请求，它就能在后台默默帮你完成：打开网页 执行脚本 输出截图/PDF/HTML。 它主要有三大神技： 1. 网页渲染： 这是它的核心绝技。能让任何网页“变身”成图片或文档。无论是捕获整个网页，还是指定区域截图，或是导出带完整样式的 PDF 报告，都易如反掌。 • 典型场景：把 Markdown 或 AI 输出的长文本，排成网页样式，再截图生成海报、长图文。 2. API 服务化 （API as a Browser） ： 它的核心理念就是“浏览器也是一种 API”。你可以通过一个简单的 POST 请求，让它执行任何网页操作，而不需要写一行浏览器自动化代码。这在 n8n、Zapier 这样的低代码平台里简直是神器！ 3. 网页自动化 （Automation）： 进阶玩法，配合 Puppeteer / Playwright 还能实现登录、点击、抓取、测试等“像真人一样”的操作。 二、三分钟搞定！本地部署 Browserless 理论说再多，不如上手练一练！部署过程超级简单，前提是你已经安装好了 Docker。 1. 在你电脑的任意位置，新建一个空目录，比如我这里叫 browserless 。 2. 进入这个目录，新建一个名为 docker compose.yml 的文件。 3. 如果你有需要定制化的字体样式，请同样把字体文件放在该目录的zfonts文件下。（没有自定义字体的可以不用建 zfonts 文件夹） 4. 把下面的配置代码复制粘贴到 docker compose.yml 文件里： 注意 ：如果你的 n8n 也是用 Docker 安装的，强烈建议将它们的 networks 设置成同一个，这样它们就可以用容器名直接“对话”，非常方便！ 4. 在当前文件夹下打开命令行/终端，运行下面这行命令： 第一次启动会下载镜像，可能需要 2 3 分钟。成功后，你用 docker ps 命令就能看到 browserless 进程已经欢快地跑起来了！ 至此，你的专属“浏览器 API”服务就部署完毕了！ 三、王炸组合：在 n8n 中引爆 Browserless 的威力！ 服务已启动，现在进入最激动人心的环节：在 n8n 里调用它！ 首先，我们通过 HTTP Request 节点来测试调用，配置如下： • Method: POST • URL : http://browserless:3000/screenshot （如果 n8n 和 browserless 在同一 Docker 网络） 或 http://localhost:3000/screenshot （如果在本机调试）。如果使用了 TOKEN，请在 URL 后面加上 ？token=your secret token. • Body Content Type : JSON JSON 示例：html 内容，尺寸，图片类型，是否全屏等参数。 然后用一个简单的工作流进行效果测试：利用 code 节点固定一版 html，传参给 bowserless 进行 html 转 image： 一个带有长文本标注样式的图片成功生成： 接下来，我们来增加一点灵活性： 1. 固定模板 + 动态内容 提前通过 AI 生成一版你喜欢的 html 模板，然后将样式通过 code 节点固定下来，最后再填充 AI Agent 节点生成的内容，这样就实现了样式固定化，文案动态化。 • 应用场景：固定样式的宣传海报、固定风格的小红书卡片和微信公众号封面图等 生成效果示例 2. 动态模板+动态内容 设计提示词让 AI Agent 基于 AI 生成的内容动态产出匹配的 HTML（样式+内容都动态），用起来更灵活但是输出内容的稳定性和美观性就依赖提示词的功底和大模型的能力了。 • 应用场景：创意启发、灵感生成、个性化内容创作等 既然用了 n8n，那最爽的必须是“ 搞批量 ”！一次性生产 5 张、10 张卡片才过瘾！无论是连续的小故事创作，还是连续的知识内容讲解，都可以轻松实现。 3. 连续故事分段出图 • 应用场景：连续小故事创作、连续知识内容讲解、图文视频创作等 效果示例： • 桃园结义（参考 AI 产品黄叔的提示词生成）