专题：用 AI 做表情包生成器

😂 谁不喜欢表情包呢？今天我们来做一个"表情包制造机"，以后斗图再也不怕输了！

⏱️ 预计用时：45 分钟 | 📋 前置要求：学完第1-4课

你将做出什么？

一个网页版表情包生成器！功能包括：

从预设底图中选择，或上传自己的图片
在图片上添加文字，自由调整位置和大小
多种字体风格（粗体、描边、阴影）
一键导出为图片，直接发给朋友

表情包的秘密

你有没有想过，一个好的表情包为什么这么有感染力？

好表情包的三要素：

要素	说明	例子
底图	一张有表现力的图片	夸张的表情、有趣的动作
文字	简短有力的台词	"就这？"、"学到了"、"我裂开了"
排版	文字放在合适的位置	通常放在顶部或底部，加描边更醒目

技术上，表情包生成器的核心是 Canvas API —— 它可以让你在网页上自由绘图，把图片和文字合成在一起。

小贴士

Canvas（画布）就像一块电子画板。你可以用 JavaScript 在上面画线、画图形、放图片、写文字——最后把整块画板导出成一张图片。这是网页端做图像处理的核心技术！

动手时间：做一个表情包生成器！

第一步：创建项目

bash

mkdir meme-maker
cd meme-maker
claude

第二步：创建基础版本

魔法咒语

帮我做一个网页版表情包生成器，要求：
1. 文件名叫 meme-maker.html，单个 HTML 文件
2. 布局：左侧是画布预览区，右侧是控制面板
3. 底图选择：
   - 提供 6 个预设底图（用 emoji 或纯色背景+表情代替真实图片）
   - 支持用户上传自己的图片（input type=file）
   - 上传的图片自动适配画布大小
4. 文字编辑：
   - 输入顶部文字和底部文字
   - 实时预览效果（输入时画布立即更新）
   - 字体大小滑块（20-80px）
   - 字体颜色选择（默认白色）
5. 文字样式：
   - 粗体黑色描边效果（表情包经典风格）
   - 文字自动居中
   - 文字阴影效果让文字在任何底图上都清晰可读
6. 画布用 Canvas API 实现，大小 500x500
7. 导出按钮：把画布内容导出为 PNG 图片下载
8. 界面风格：活泼有趣，按钮用圆角，色彩鲜艳

打开看看效果：

bash

start meme-maker.html

第三步：理解 Canvas 的核心操作

表情包生成器用到的 Canvas 关键代码：

画图片到画布上

javascript

const canvas = document.getElementById('meme-canvas');
const ctx = canvas.getContext('2d');

// 把图片画到画布上
const img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};
img.src = 'your-image.png';

在画布上写文字

javascript

// 设置文字样式
ctx.font = 'bold 40px Impact, sans-serif';
ctx.fillStyle = 'white';        // 文字颜色
ctx.strokeStyle = 'black';      // 描边颜色
ctx.lineWidth = 3;              // 描边粗细
ctx.textAlign = 'center';       // 居中对齐

// 先画描边，再填充——这样文字就有了黑色边框
ctx.strokeText('顶部文字', canvas.width / 2, 50);
ctx.fillText('顶部文字', canvas.width / 2, 50);

导出图片

javascript

// 把画布变成图片 URL
const dataURL = canvas.toDataURL('image/png');

// 创建下载链接
const link = document.createElement('a');
link.download = 'my-meme.png';
link.href = dataURL;
link.click();

想了解更多？

Canvas API 是 HTML5 最强大的功能之一。除了做表情包，它还被用来做：

网页游戏的画面渲染
在线图片编辑器（类似简化版 PS）
数据可视化图表
签名板、手写输入

学会了 Canvas，你就掌握了网页上一切和"画"有关的技术！

第四步：添加更多表情包模板

魔法咒语

增强表情包生成器：
1. 预设模板系统：
   - 用 Canvas 绘制6个预设"底图"（不用真实图片）：
     a) 纯色渐变背景 + 大 emoji 居中
     b) 分割模板：上下两格（用于对比型表情包）
     c) 四格漫画模板（2x2 网格）
     d) 对话气泡模板（带气泡形状）
     e) "Drake" 风格模板（左侧两个表情 + 右侧两段文字）
     f) 全屏文字模板（纯色背景 + 超大文字）
   - 点击模板缩略图切换
2. 每个模板有不同的文字输入区域
3. 预设一些热门文字供快速选择（"就这？"、"绝了"、"学到了"等）

第五步：添加贴纸和装饰

魔法咒语

给表情包生成器添加贴纸功能：
1. 贴纸面板：提供 20+ 个 emoji 贴纸
2. 点击贴纸后，可以在画布上点击放置
3. 放置后的贴纸可以：
   - 拖动调整位置
   - 用滑块调整大小
4. 支持添加多个贴纸
5. 添加一个"随机表情包"按钮：随机选底图 + 随机文字 + 随机贴纸，一键生成搞笑组合

进阶挑战

表情包收藏夹：把生成的表情包保存到 localStorage，建立自己的表情包库
批量生成：输入一组文字，自动套用到同一个模板上，一次生成多张
GIF 表情包：如果你学过进阶篇，试试用 Python 把多帧合成 GIF 动图
分享功能：添加"复制到剪贴板"按钮，方便直接粘贴到聊天窗口

1. Canvas API 中，ctx.strokeText 和 ctx.fillText 的区别是什么？

2. 表情包文字为什么通常要加黑色描边？

3. canvas.toDataURL() 的作用是什么？

参考示例

完整的表情包生成器示例：meme-maker.html

下载后用浏览器打开即可使用。

专题：用 AI 做表情包生成器 ​

你将做出什么？ ​

表情包的秘密 ​

动手时间：做一个表情包生成器！ ​

第一步：创建项目 ​

第二步：创建基础版本 ​

第三步：理解 Canvas 的核心操作 ​

第四步：添加更多表情包模板 ​

第五步：添加贴纸和装饰 ​

进阶挑战 ​

参考示例 ​

专题：用 AI 做表情包生成器

你将做出什么？

表情包的秘密

动手时间：做一个表情包生成器！

第一步：创建项目

第二步：创建基础版本

第三步：理解 Canvas 的核心操作

第四步：添加更多表情包模板

第五步：添加贴纸和装饰

进阶挑战

参考示例