表情包生成器

表情包生成器通常意味着把照片上传到别人的服务器，然后祈祷导出的图没有水印。这一个完全在浏览器中运行：拖入图片，加上顶部和底部字幕，选择字体与颜色，下载干净的 PNG。不会传输任何内容。

使用方法

1. 添加图片。 点击拖放区打开文件选择器，或把文件拖到上面。工具接受浏览器能解码的任意图片类型——通常是 JPG、PNG、GIF 和 WebP。
2. 编写字幕。 在顶部文本和底部文本框中输入。每个限制 100 个字符，并以大写渲染。
3. 设置文字样式。 选择 Impact、Arial 或 Comic Sans MS，用滑块设置 12 到 120 的字号，并选取文字颜色和轮廓（描边）颜色。
4. 下载。 点击下载按钮把画布保存为 meme.png。如果没有加载图片，按钮不会有任何动作。

图片会经历什么

画布是一个固定的 600×400 矩形。图片加载后，工具会把它与画布的 3:2 比例做比较，按较长的一边缩放至覆盖画布，然后居中。

• 如果图片比 3:2 更宽，会缩放到完整宽度，多余的高度被画布裁掉。
• 如果图片比 3:2 更高，会缩放到完整高度，多余的宽度被裁掉。

由于画布会先被清空且从不填充，图片没有覆盖到的区域保持透明。透明条就是这样产生的。

实操示例：一张 2000×1500 的照片

一张 2000×1500 的照片宽高比是 1.333，而画布是 600 / 400 = 1.5。图片相对于其高度比画布更窄，因此工具按画布高度缩放：

• 绘制高度 = 400 px
• 绘制宽度 = 400 × 1.333 = 533 px
• 左侧偏移 = (600 − 533) / 2 = 33.5 px

结果是一张 533×400 的图片居中，两侧各有约 33 像素的透明条。一张 1920×1080 的照片（比例 1.778）则相反：它会缩放到完整的 600 像素宽度，填满 600×338 的条带，上下留下约 31 像素的透明区域。上传前裁剪成 3:2 就能完全消除透明条。

排版细节

字体按 bold <size>px "<font>", "Impact", sans-serif 应用，因此如果所选字体不可用，浏览器会回退到 Impact，再回退到系统无衬线字体。文字绘制两次：一次用描边色调用 strokeText，一次用填充色调用 fillText。描边宽度随字号缩放（约为字号的八分之一，最小 2 像素），使描边与字母保持协调。

顶部字幕从距顶部 fontSize + 20 处开始，底部字幕从基线向上锚定在 height − 20 处。多行字幕向图片中部扩展，行高为字号的 1.2 倍。在默认 48 px、默认白色填充和黑色描边下，经典外观立刻呈现。

选择字体与颜色

三种字体传达截然不同的语气。Impact 是经典的图梗字体：紧凑、厚重，即使描边很粗也清晰易读。Arial 更干净、不那么反讽，适合工作或说明类表情包。Comic Sans MS 显得刻意随性，和轻松的字幕很搭。如果浏览器没有安装所选字体，会回退到 Impact，因此要在不同机器上获得一致效果，Impact 是最稳妥的选择。

颜色对比度是可读性的另一半。默认的白色填充加黑色描边几乎适用于任何照片，因为描边把字母与明暗背景都分隔开来。反过来——黑色填充加白色描边——同样易读。有颜色但无描边的填充容易淹没在杂乱的图片里，尺寸小时尤其如此。当字幕覆盖在细节丰富的区域上时，加大字号或使用对比强烈的描边色，比任何其他调整都更有效。

值得了解的局限

• 固定输出尺寸。 无论源分辨率如何，下载永远是 600×400。
• 不能自由定位。 字幕只能在顶部或底部，居中，且始终大写。
• 只取第一帧。 动态 GIF 会变成静止图。
• 按单词换行。 单个极长的词可能溢出画面。
• 每个字幕区域最多两行，因为只有两个文本框。
• 仅客户端处理。 图片用 FileReader 读取并绘制到画布上，绝不上传。
• 没有阴影或间距控制。 只能调整填充色和描边色，不提供字距和投影。

相关工具

• 图片压缩器 — 在浏览器中压缩和调整图片尺寸。
• 图片转 Base64 — 将图片转换为 Base64 数据 URI 用于嵌入。
• 文字转手写体 — 将文字转换为逼真的手写体 PNG 图片。
• 颜色选择器 — 选取颜色并在 HEX、RGB 和 HSL 之间转换。