0

OG 图像生成器 — 社交共享图像制作工具

撰写带有标题、副标题、背景和徽标的 1200×630 Open Graph 社交共享图像,在真实画布上实时渲染 - 然后在下载干净的 PNG 之前预览它在 Twitter/X、Facebook、LinkedIn 和 Discord 链接卡中的框架外观。

Buy Me a Coffee at ko-fi.com
处理中... 0%
构图
渲染平台预览
完成

结果

开放图谱图像是当链接粘贴到聊天、推文或 Slack 频道中时显示的图片 - 每个渲染图像的平台都期望画布大小约为 1200×630 像素,Facebook 的 og:image 和 Twitter 的 summary_large_image 卡都是围绕该尺寸设计的。如果尺寸错误,图像会被裁剪、模糊或挤压;如果布局错误,标题就会在繁忙的照片中显得难以辨认。该工具使用 Canvas 2D API 以真实目标分辨率合成图像,因此您在预览中看到的是 PNG 中附带的精确像素网格。

选择一个背景 - 一种纯色、由您选择的两种颜色构建的两级线性渐变,或者上传的照片,它会被裁剪以填充整个 1200×630 框架,就像 CSS 背景大小:封面一样,而不是不按比例拉伸。输入标题和可选的副标题:两者都是根据画布自身的字体规格逐个字符进行测量的,因此,太长而无法容纳在一行中的标题会在实际单词边界处包裹到第二行或第三行,而不是溢出边缘或被无形地截断。选择居中或左对齐,选择适合背景的文本颜色,然后以固定、可读的大小将可选徽标放入角落。

在画布下方,四张小卡片大致展示了真实平台将其包裹在自己的镶边中后的最终图像的外观:Twitter/X 的卡片仅显示域名和图像下方的粗体标题,没有描述行,Facebook 在标题和描述块上方添加了一个大写的域名条,LinkedIn 将域名放在标题下方,根本没有任何描述,Discord 的嵌入将域名、标题和描述放在图像上方,放在自己的深色主题中。这些是出于规划目的的近似样式 - 明确标记为说明性的,带有您自己输入的域名行 - 不是实际平台的实时获取或屏幕截图,因为共享链接并让每个平台自己的爬虫读取页面的真实 og:image 和 og:title 元标记才是实际生成实时卡片的原因。

一切都在浏览器中的 HTML canvas 元素上本地呈现:标题、副标题、上传的背景和徽标永远不会离开您的设备,导出的文件是一个干净的 canvas.toBlob() PNG,仅包含您撰写的内容 - 没有模型边框、假浏览器栏或平台徽标被烘焙到下载的图像中。如果您之后还需要调整大小或转换导出的 PNG,则可以使用此网站的图像调整器和图像转换器工具来完成此任务。