HTML文件上传怎么调用手机摄像头-html教程-PHP中文网

最简单唤起摄像头的方式是使用，需注意兼容性：ios 16+才可靠支持capture="user"，微信x5内核需降级处理；getusermedia()更可控但需https及错误处理；上传前必须压缩且兼顾exif方向校正。

html文件上传怎么调用手机摄像头

直接用 `input type="file"` 加 `capture` 属性最简单

不用写 JavaScript 就能唤起摄像头，前提是用户点的是这个 input，且设备和浏览器支持。关键就三样：accept="image/*"、capture="environment"（后置）、capture="user"（前置，iOS 16+ 才可靠）。不加 capture，很多安卓机默认弹相册；加了才大概率触发摄像头。

常见错误现象：capture="camera" 是旧写法，已废弃，部分安卓机型会忽略；iOS 旧版只认空值 capture 或直接忽略整个属性；微信 X5 内核对 capture 支持极差，常 fallback 到相册。

必须写 accept="image/*"，否则浏览器不识别为图像采集场景
capture="environment" 比 capture="user" 兼容性好得多，iOS 16+ 才真正支持强制前置
不要设 multiple——单次调用摄像头只产出一张图，多选是相册行为
如果要兼容微信，得降级：去掉 capture，只留 accept="image/*"，再加一句提示“请手动切换到相机”

为什么 `getUserMedia()` 更可控但更重

当你要实时预览、自定义快门、加滤镜、截特定帧、或处理方向/EXIF 元数据时，getUserMedia() 是唯一选择。它不依赖 HTML 属性，而是走标准媒体流 API，兼容性反而比 capture 更稳（Chrome 53+、Firefox 64+、Safari iOS 14.3+），但要求 HTTPS（本地开发可用 localhost）。

容易踩的坑：NotAllowedError（用户点拒绝）、NotFoundError（没找到设备）、SecurityError（HTTP 页面调用）；还有 Safari 对 canvas 尺寸有限制，必须用 video.videoWidth/video.videoHeight 设置真实宽高，不能靠 CSS 缩放，否则截图模糊或黑屏。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

拿到 stream 后必须赋给 video.srcObject，再等 video.onloadedmetadata 触发才能读尺寸
截图用 canvas.toBlob()，别用 toDataURL() 再转 blob——base64 解码吃内存，大图易卡死
上传必须用 FormData 直传 blob，别拼 base64 字符串发 JSON，后端解析麻烦还容易超长

拍完图怎么读取和校验

监听 input 的 change 事件，从 e.target.files[0] 拿 File 对象——这是唯一可靠方式。input.value 在现代浏览器里始终为空字符串，别信它。

File 对象自带 name、type、size，可用于基础校验：是否真选了图、是不是 image/jpeg 或 image/png、有没有超 5MB。注意 iOS Safari 拍照后 lastModified 时间不准，不能拿它做去重或唯一性判断。

小图预览可用 FileReader.readAsDataURL()，但超过 2MB 就可能卡顿
大图建议走 FileReader.readAsArrayBuffer() + 后端接收二进制流，或直接转 Blob 用 fetch 上传
务必检查 e.target.files.length > 0，防止用户取消拍照后触发空文件提交

上传前压缩为什么不能省，又为什么不能全靠前端

移动端原图动辄 3–5MB，不压缩上传失败率高、耗用户流量、还拖慢体验。但压缩逻辑必须前后端协同：前端压，后端也得能收未压缩图。因为 iOS 用户若禁用 JS，capture 仍可工作，但压缩脚本就失效了。

最稳妥的压缩路径是 canvas 等比缩放 + toBlob()：canvas.width/canvas.height 先按宽度 ≤1200px 缩放，再调 toBlob(callback, 'image/jpeg', 0.8)。PNG 不支持 quality 参数，所以类型必须显式指定为 image/jpeg。