HTML5无法自动校正扫描件倾斜，需前端JavaScript处理：用Canvas+getImageData做像素级几何变换，或CSS仅视觉微调，或第三方库实现透视校正；注意iPad性能限制与预处理必要性。
HTML5 本身没有内置的“扫描件倾斜校正”能力，iPad 上通过 导入的图片（比如用系统相机扫描生成的 JPG/PNG）是原始图像数据，倾斜是拍摄时产生的物理畸变，必须在前端用 JavaScript 处理像素或几何变换来校正。
用 Canvas + getImageData 校正倾斜（适合轻度歪斜）
这是最可控、不依赖后端的方式。核心思路：提取图像内容区域 → 计算主文本行角度 → 用 ctx.transform 或仿射矩阵旋转反向补偿。
- 先用
ctx.drawImage()把文件读取的Blob绘到，确保宽高比正确 - 对灰度图做简单边缘检测（如 Sobel 算子），再用霍夫变换（
cv.HoughLinesP）需 OpenCV.js；更轻量的做法是扫描多行像素的黑白跳变密度，找最大连续水平方向强度角 - 若倾斜角 θ 已知（比如从 EXIF 或用户手动选两点估算），可用
ctx.rotate(-θ)配合ctx.translate()居中重绘 - 注意：Canvas 的
rotate()是绕左上角旋转，必须先translate(canvas.width/2, canvas.height/2)再 rotate，否则图像会偏出画布
用 CSS transform 强制视觉对齐（仅 UI 层，不改像素）
如果只是让预览看起来“不歪”，且后续不用于 OCR 或打印，可用 CSS 快速微调。但这是欺骗眼睛，导出仍是歪的。
img#scanned {
transform: rotate(-0.8deg);
transform-origin: center;
image-rendering: -webkit-optimize-contrast;
}
-
transform-origin: center避免边缘裁切 -
image-rendering在 iPad Safari 上能减少旋转后的模糊 - 该方式无法响应式适配不同设备缩放，且
rotate()值必须人工试出来（或靠用户滑块调节） - 导出为文件时，这个 transform 不生效 —— 你拿到的还是原始图
用第三方库做透视校正（处理拍歪+边角翘起）
单纯旋转不够时（比如文档四角不在同一平面），需透视变换（Perspective Correction）。纯前端推荐 jsfeat 或封装好的 document-scanner-js。
立即学习“前端免费学习笔记（深入）”；
-
document-scanner-js提供scanDocument(image, { mode: 'auto' })，内部用边缘检测 + 四点识别 +perspectiveTransform - iPad 摄像头有畸变，建议先用
getUserMedia拍摄时开启focusMode: 'continuous'和exposureMode: 'continuous'提升清晰度 - 注意 iOS 16+ 对
OffscreenCanvas支持仍有限，所有计算尽量在主线程上完成，避免跨线程传图像数据失败 - 大图（>3000px 宽）在 iPad 上容易触发内存警告，建议先用
createImageBitmap()缩放到 1200px 再处理
真正可靠的校正是在像素级操作，不是加个 CSS 就完事。iPad 的摄像头畸变、低光照噪点、以及 Safari 对 Web Workers 中 ImageBitmap 的兼容限制，会让看似简单的“扶正”变成多个环节都要验证的链路。别跳过 resize 和灰度预处理，那一步省了，后面霍夫线检测基本就失效。
