站点介绍
Three group chats, two blank gray squares, one wasted afternoon. I pasted a launch link into a Slack channel on Jan 5, 2026 at 9:00 AM and got the platform's default tile back. The headline sat right there in the HTML; the og:image tag did not.
When you share a URL, a crawler reads the Open Graph tags in the page's <head>. og:image is the single line that points at the picture the card should show; leave it out, and the platform invents a flat gray tile with your domain in small type.
I learned this the hard way with an 800×418 export that X cropped straight through the second line of my title. 1200×630 is the size every major platform accepts without a fight, so this page draws at exactly that size and never asks you to crop.
Nothing here needs a design app or a $29 template pack. Canvas is the browser's own drawing surface, and it renders the whole card locally in a few milliseconds.
The five presets are real layouts, not five colorways of one picture. Split puts the headline in a left column with a solid block on the right, while Center stacks a top badge over a large centered title.
Slant adds an angled color bar along the bottom, Grid quote lays a fine grid under a giant quote mark and a vertical rule, and Duotone cuts the card into two colored halves with text on opposite sides.
Each one recomputes where the title, badge, subtitle, and site name land. I would not use the centered layout for a 40-character headline; the left-aligned ones give the words far more room to breathe.
Wrapping is measured, not guessed. measureText asks the browser how wide each character actually is, so an English word stays whole, a Chinese character breaks on its own boundary, and an emoji never splits into two broken halves.
Every line is also clipped to the text column with a maximum width, so nothing paints outside the 1200×630 frame even when a font behaves oddly. Truncation kicks in when the copy genuinely cannot fit: the last line gets an ellipsis and the strip above the preview says 'text too long' instead of quietly cutting the words.
Mixed text is where most generators fall apart. CJK punctuation, full-width commas, and Latin words with hyphens all pass through the same tokenizer here, and the edge cases — an empty title, a single 120-character line, a string of emoji — all render without throwing.
The PNG you get is the real 1200×630 file, not a screenshot scaled up. Upload it to your own site, then point og:image at that URL; the four meta lines beside the preview cover og:title, og:description, the image, and the Twitter card type.
Platforms cache these cards aggressively, which is the part people miss. Change the filename before re-uploading, or use the platform's debugger to force a refresh — editing the same PNG over and over rarely helps.
I keep one preset per project so the badge, colors, and site name never drift between posts. A card that costs $0 and thirty seconds to rebuild is a card I will actually keep current.
Platforms cache og:image. WeChat, X, and Slack fetch a card once and then keep it for a long while. Upload under a new filename, or use the platform's own debugger to force a refresh; that works better than editing this PNG over and over. This page only generates the image and the four meta lines — uploading and refreshing happen on your own site.
No. Lines wrap by measured character width, and mixed English, Chinese, emoji, and CJK punctuation all stay inside the frame. Text that is genuinely too long gets truncated with a 'text too long' note above the preview; lower the font size or shorten the copy.
Yes. The five layouts are independent, and copy, size, weight, colors, and the decoration toggle are separate controls. A sample preset fills in a whole set at once, but changing one field afterwards leaves the rest alone.
No. Everything is computed in this browser and saved in localStorage on this device; there is no copy on a server. To wipe it completely, use 'Clear my data' in the footer — it asks for confirmation first.
评论列表 （0条）
