iOS WebView中无法直接调用input[type="file"]触发图片裁剪，因系统默认禁用相机/相册访问，需满足HTTPS、WKWebView权限配置、viewport合规等严格条件；同时需处理EXIF方向、GPU加速、base64安全导出及WKScriptMessage回传等关键环节。
iOS WebView 中无法直接调用 input[type="file"] 触发图片裁剪？
是的，iOS Safari 和 WKWebView 默认禁用原生文件选择器对相机/相册的访问，除非满足严格条件。即使你写了 ，在非主域 HTTPS、未添加 viewport 配置或未启用特定权限的 WKWebView 里，点击毫无反应，更别说后续裁剪了。
- 必须确保页面运行在 HTTPS 协议下（HTTP localhost 在某些 iOS 版本下会降级为只读）
- WKWebView 需显式设置
mediaTypesRequiringUserActionForPlayback = []，并允许allowsInlineMediaPlayback = true -
viewportmeta 标签中不能含user-scalable=no，否则部分 iOS 版本会屏蔽 file input
HTML5 裁剪库（如 cropperjs）在 iOS 上加载失败或拖动卡顿？
常见原因是 iOS WebKit 对 touchstart/touchmove 的默认行为拦截，以及 CSS transform 性能限制。cropperjs 默认依赖 transform: translate() 移动裁剪框，但 iOS 15+ 对非合成层元素频繁重绘极不友好。
- 务必给裁剪容器加
style="-webkit-transform: translateZ(0); will-change: transform;"强制 GPU 加速 - 初始化 cropper 时传入
{ready: () => { document.body.style.webkitTouchCallout = 'none'; }}防止长按弹出菜单干扰 - 避免在
change回调里直接调用canvas.toDataURL()—— iOS Safari 对大图（>2048px）会静默失败，应先用canvas.getContext('2d').drawImage()缩放到安全尺寸再导出
WKWebView 如何把裁剪结果回传给原生 iOS 代码？
不能依赖 window.location.href 跳转或 alert()，得用 JavaScriptCore 或 WKScriptMessage。最稳的方式是注册 WKScriptMessageHandler，让 HTML 端调用 window.webkit.messageHandlers.cropResult.postMessage({base64, width, height})。
- iOS 原生侧注册 handler 时，名字必须和 JS 调用的完全一致（大小写敏感），且仅支持字符串、数字、字典、数组，不支持 Blob 或 File 对象
- JS 端生成的 base64 字符串建议压缩：先用
canvas.toBlob()+new FileReader().readAsDataURL()，比直接toDataURL()内存占用低 40%+ - 若需保留 EXIF（如方向信息），别用 canvas 绘图硬解——改用
exif-js提前读取 orientation，并在 drawImage 前做矩阵变换
为什么 iOS 拍照后图片自动旋转 90 度？
不是裁剪库的问题，是 iOS 相机写入 JPEG 时只更新 EXIF Orientation 字段（值为 6），而 HTML5 Canvas 默认忽略该字段，直接按原始像素阵列渲染。用户看到的就是横着的图。
立即学习“前端免费学习笔记（深入）”；
- 必须在裁剪前解析 EXIF：用
EXIF.getData(img, () => { const orient = EXIF.getTag(img, 'Orientation'); }) - 根据
orient值调整 canvas 绘制逻辑（比如 orient === 6 时，先ctx.translate(w/2, h/2)，再ctx.rotate(Math.PI/2)，再ctx.drawImage(...)） - 导出前记得重置 canvas 宽高属性（
canvas.width = w; canvas.height = h;），否则旋转后尺寸错乱
