HTML5本身不提供主体识别裁切能力，需依赖JavaScript调用ShapeDetectionAPI（仅Chromium系浏览器支持）或TensorFlow.js模型（如BlazeFace）实现人脸检测与Canvas裁切，且须处理EXIF方向、像素比、坐标对齐等细节。
HTML5 本身不提供主体识别裁切能力
HTML5 标准里没有 faceDetection、subjectCrop 或类似 API。所谓“HTML5 图片智能裁切”，实际是靠 JavaScript 调用浏览器支持的底层能力（如 ShapeDetectionAPI）或借助第三方模型（如 TensorFlow.js），再配合 Canvas 手动绘制裁切区域。
Chrome/Edge 中可用 ShapeDetectionAPI 提取人脸/文本/条码区域
该 API 目前仅在 Chromium 内核浏览器（Chrome ≥ 84，Edge ≥ 84）中启用，需 HTTPS 或 localhost 环境，且默认禁用——必须手动开启实验性标志：chrome://flags/#enable-shape-detection（重启生效）。
实操要点：
-
FaceDetector只能检测人脸矩形框，不返回关键点或置信度；对侧脸、遮挡、小尺寸人脸鲁棒性差 - 检测结果是
{x, y, width, height}坐标，需转换为 Canvas 绘图坐标（注意 CSS 像素 vs 设备像素比） - 不能直接“裁切图片”，得用
ctx.drawImage()把原图指定区域画到新 canvas 上 - 示例关键代码片段：
const detector = new FaceDetector();
const faces = await detector.detect(imageElement);
if (faces.length > 0) {
const { x, y, width, height } = faces[0];
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = width; canvas.height = height;
ctx.drawImage(imageElement, x, y, width, height, 0, 0, width, height);
// canvas.toDataURL() 即为裁切后图片
}
跨浏览器兼容方案：用 @tensorflow-models/blazeface
BlazeFace 是轻量级人脸检测模型，纯 JS 实现，支持所有现代浏览器，无需开启 flag，但首次加载模型约 1–2 MB，且推理依赖 GPU 加速（WebGL）。
立即学习“前端免费学习笔记（深入）”；
使用注意点：
- 模型初始化是异步的，必须
await load()完成后再调用estimateFaces() - 返回坐标是归一化值（0–1），需乘以原始图像宽高才能得到像素位置
- 默认返回多个人脸，若只要主视觉区域，建议取面积最大或居中的那个
boundingBox - 非人脸主体（如宠物、商品）无法识别，需换用更通用的目标检测模型（如
tf-models/coco-ssd），但体积和延迟显著上升
Canvas 裁切时容易忽略的缩放与像素对齐问题
用户上传的图片常带 EXIF 方向信息（如 iPhone 拍照旋转 90°），而 imageElement.naturalWidth/Height 不反映该旋转；直接用 drawImage 裁切会导致区域错位。
务必处理的细节：
- 用
exifr.parse()或piexifjs读取并修正 orientation - Canvas 的
width/height属性设为 CSS 显示尺寸，style.width/style.height控制缩放，二者不一致会模糊裁切结果 - 目标区域坐标若含小数，
drawImage会触发插值，导致边缘发虚；建议Math.round()对齐整像素
真正卡住人的，往往不是算法，而是图像元数据、设备像素比、Canvas 坐标系这三者混在一起时的坐标换算偏差。
