HTML5中用<canvas>裁剪导出社交媒体封面图的核心是：先按目标尺寸用drawImage()九参数重载绘制图片局部区域，再调用toDataURL()或toBlob()导出PNG/JPEG文件；需确保img.onload后操作，支持居中裁剪、跨域处理及多平台尺寸适配。
在 HTML5 中用 <canvas> 裁剪并导出指定尺寸的社交媒体分享封面图，核心是：先按目标尺寸绘制原始图片的局部区域（裁剪），再调用 toDataURL() 或 toBlob() 导出为图片文件。整个过程不依赖后端，纯前端完成。
准备图片并加载到 canvas
必须等图片加载完成后再操作 canvas，否则绘图为空白。推荐使用 img.onload 回调确保时序：
const img = new Image();
img.crossOrigin = 'anonymous'; // 若图片跨域（如 CDN），需此行，且服务端支持 CORS
img.src = '/path/to/your/image.jpg';
img.onload = () => {
// 后续裁剪与导出逻辑放这里
};按目标尺寸裁剪（居中/自定义区域）
社交媒体封面图常有固定宽高比（如微信公众号 900×500、小红书 1242×1660）。裁剪本质是用 drawImage() 的 9 参数重载，指定源图像的哪一块画到 canvas 上：
- 若要居中裁剪：计算图片中能覆盖目标宽高的最大矩形区域（以原图中心为基准）
-
若要手动选区：记录用户拖选的
{x, y, width, height}，直接作为源区域
示例：将一张大图居中裁成 1200×630（常见 Facebook 封面尺寸）：
立即学习“前端免费学习笔记（深入）”；
const targetWidth = 1200;
const targetHeight = 630;
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = targetWidth;
canvas.height = targetHeight;
<p>// 计算源图裁剪区域（保持比例居中）
const scaleX = img.width / targetWidth;
const scaleY = img.height / targetHeight;
const scale = Math.max(scaleX, scaleY); // 保证填满
const srcWidth = targetWidth <em> scale;
const srcHeight = targetHeight </em> scale;
const srcX = (img.width - srcWidth) / 2;
const srcY = (img.height - srcHeight) / 2;</p><p>ctx.drawImage(
img,
srcX, srcY, srcWidth, srcHeight, // 源区域（裁剪框）
0, 0, targetWidth, targetHeight // 目标区域（铺满 canvas）
);导出为 PNG/JPEG 文件下载
裁剪完成后，调用 canvas 方法生成图片数据，并触发浏览器下载：
-
导出 PNG（透明背景支持，质量无损）：
canvas.toDataURL('image/png') -
导出 JPEG（体积更小，适合照片；可设质量，如
0.9）：canvas.toDataURL('image/jpeg', 0.9)
生成下载链接：
const link = document.createElement('a');
link.download = 'share-cover.jpg';
link.href = canvas.toDataURL('image/jpeg', 0.9);
link.click();如需导出为 Blob（例如上传前处理或兼容性更好），用 canvas.toBlob() + URL.createObjectURL()：
canvas.toBlob(blob => {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'share-cover.jpg';
link.click();
URL.revokeObjectURL(url); // 用完及时释放内存
}, 'image/jpeg', 0.9);适配常见社交平台尺寸（速查）
不同平台对封面图尺寸和安全边距要求不同，前端可预设常用配置：
- 微信公众号：900 × 500 px（顶部约 100px 可能被遮挡，内容建议居中偏上）
- 知乎专栏：1200 × 630 px
- 小红书：1242 × 1660 px（竖版，9:16）
- Twitter/X：1200 × 675 px（16:9）
- Facebook 页面封面：1640 × 856 px（移动端会裁切左右，建议核心内容放在中间 820px 内）
实际项目中，可封装一个函数：exportCover(img, { width, height, mode: 'center' | 'custom', x, y, w, h })，复用裁剪逻辑。
