用CSS生成文字图片
Out Of Body 是一个面向网页设计师和前端开发者的创意 CSS 工具。它的核心理念是:网页内容不一定要以 DOM 文本或图片节点的形式存在。工具会先将文本或图片绘制到 canvas,再逐像素读取颜色值,最终生成可用于 CSS box-shadow 的数据,从而用原生 CSS 呈现文字或图像。
它提供“Convert text to CSS”和“Convert image to CSS”两个入口,并带有示例和 sample code。正文提到页面上的标题、box-shadow 文本和猫图都是实际案例。它不依赖框架,仅需 vanilla CSS,适合做网页实验、反爬展示、不可复制文本、降低邮箱被机器人抓取、减少图片元数据泄露等场景。隐私方面,文本和图片在本地处理,不上传到服务器,但网站使用 Google Analytics 做流量监控。
需要注意的是,这种方案本质上会生成大量 box-shadow。作者明确提示 Firefox/Gecko 在大型 box-shadow 渲染上有困难,严重时可能冻结窗口;Chrome 和 Safari 表现更好。当前还存在像纯 CSS 输出中左上角像素限制等技术边界。
正文未看到正式定价、套餐或商业授权说明,更新记录中仅提到加入了“buy me a coffee”,因此更像免费工具加捐赠支持。授权与版权条款未说明;开源、NPM package、教程和更完善的 sample code repository 都还在计划中。协作能力方面未提及团队、评论、共享或多人编辑功能。
优点是思路新颖、依赖极低、本地处理隐私友好,并能解决一些“不要被复制/抓取”的轻量需求。缺点是可访问性、SEO、可维护性和浏览器性能都可能受影响,不适合承载重要正文内容或大图。它更适合前端创意实验、设计师作品页彩蛋、隐私展示小组件,以及愿意接受非标准实现的开发者。
正文没有提供中国大陆访问、支付或 CDN 信息,故判断为未知。若访问不稳定,可考虑用 Canvas、SVG、CSS Sprite、图片水印、邮箱混淆脚本或常规前端反爬方案替代。对于生产项目,应优先评估性能、无障碍与合规风险。
本测评基于公开资料整理,不构成购买建议,请以 outofbody.app 官网实际信息为准。
有趣的前端CSS实验工具,可免费使用。
评分明细(分布与用户短评)接入中。当前展示 TG4G 综合评分,数据源自公开测评与用户反馈。