HTML5 中怎么用 canvas 裁剪并导出指定尺寸的社交媒体分享封面图-H5教程-PHP中文网

html5中用裁剪导出社交媒体封面图的核心是：先按目标尺寸用drawimage()九参数重载绘制图片局部区域，再调用todataurl()或toblob()导出png/jpeg文件；需确保img.onload后操作，支持居中裁剪、跨域处理及多平台尺寸适配。

html5 中怎么用 canvas 裁剪并导出指定尺寸的社交媒体分享封面图

在 HTML5 中用 <canvas></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）
);</p>

导出为 PNG/JPEG 文件下载

裁剪完成后，调用 canvas 方法生成图片数据，并触发浏览器下载：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

导出 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);