HTML上传封面时怎么强制16:9比例
浏览器原生 <input type="file"> 不支持限制图片宽高比，所谓“自动裁剪”或“比例提示”必须靠 JS + Canvas 或第三方库实现，纯 HTML 做不到。
常见错误是以为加个 accept="image/*" 或写个 width/height 属性就能控制比例——这些对上传行为完全无效。
accept 只过滤文件类型，不限制尺寸width/height 是渲染尺寸，不改变原始文件数据表单提交后服务端仍会收到原始图，前端没干预就等于没约束
用 FileReader + Canvas 手动校验16:9并提示
核心逻辑是：用户选图后读取为 Image 对象，检查 img.naturalWidth / img.naturalHeight 是否 ≈ 1.777…（即 16/9），再给出明确提示。
注意不能只看文件名后缀或 EXIF 方向，必须实际加载像素尺寸；某些手机竖拍图带旋转信息，naturalWidth 和显示宽高可能相反。
立即学习“前端免费学习笔记（深入）”；
用 FileReader.readAsDataURL() 加载图片，避免跨域问题判断比例时留 0.02 容差，比如 Math.abs(ratio – 16/9) > 0.02提示文案要具体，例如：“请上传 16:9 比例图片（如 1920×1080），当前为 ${w}×${h}”别直接禁用上传按钮，先提示+允许用户确认继续，否则影响可用性
Canvas 裁剪到16:9再上传的实操要点
如果真要“自动裁剪”，得用 canvas.drawImage() 手动缩放+截取，生成新 Blob 替换原始文件。但必须让用户感知这个过程，否则容易引发投诉。
关键不是技术难，而是裁哪一块：居中裁？顶部对齐？是否保留完整高度？这些逻辑必须显式定义，不能默认。
推荐方案：等比缩放到目标高度（如 1080px），再水平居中截取 1920px 宽 —— 这最接近“封面感”用 canvas.toBlob(callback, ‘image/jpeg’, 0.9) 控制输出质量，避免 PNG 体积爆炸替换原始 File 对象需新建 File 实例：new File([blob], originalFile.name, {type: ‘image/jpeg’})注意 iOS Safari 的 File 构造函数兼容性，可降级为 FormData 附加字段说明已裁剪
服务端必须二次校验比例
前端所有校验都可绕过，只要用户禁用 JS 或用 curl 上传，就完全失效。所以 16:9 约束必须在服务端复现一次。
常见坑是只读文件头或 metadata，而 JPEG 的 EXIF Orientation 会导致宽高值颠倒；正确做法是解码图像像素，再取 width/height。
Node.js 可用 sharp 库：sharp(file).metadata().then(({width, height}) => …)Python 用 PIL.Image.open() 后调用 img.size，自动处理 Orientation校验失败应返回明确错误，例如 HTTP 400 + JSON：{"error": "cover_ratio_invalid", "expected": "16:9", "actual": "4:3"}
比例这事，前端提示是用户体验，后端拦截才是底线。漏掉任何一环，作品集封面就可能变成一长条或正方形缩略图。
评论(0)