上一篇
HTML中，可借助“元素结合JavaScript实现手机端拍摄。
HTML手机端拍摄的实现方法
在HTML手机端实现拍摄功能，主要涉及调用设备的摄像头并处理拍摄的照片,以下是几种常见的实现方式及其详细步骤：
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
使用<input type="file">元素 |
简单易用，无需复杂权限申请 | 可能导致页面刷新，用户体验较差 | 快速实现拍照上传，对功能要求不高的场景 |
利用WebRTC的getUserMedia API |
实时访问摄像头，可预览画面，避免页面刷新 | 需要用户授权，部分浏览器兼容性问题 | 需要实时预览、拍照及后续图像处理的场景 |
| 结合Canvas进行图像处理 | 强大的图像处理能力，可压缩、裁剪等 | 代码复杂度较高，需熟悉Canvas API | 需要对拍摄照片进行本地处理（如压缩、裁剪）后再上传的场景 |
使用<input type="file">元素
HTML结构：
<input type="file" accept="image/" capture="camera">
JavaScript处理：
var input = document.querySelector("input[type=file]");
input.addEventListener("change", function(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var dataURL = e.target.result;
// 在此处对dataURL进行操作，例如显示图片
document.getElementById('photo').src = dataURL;
};
reader.readAsDataURL(file);
});
说明：
accept="image/"限制文件类型为图片。capture="camera"提示设备直接打开摄像头拍照,而非选择相册中的图片。- 该方法简单，但点击后会跳转到系统相机应用，完成后返回页面,可能引起页面刷新。
利用WebRTC的getUserMedia API
HTML结构：
<video id="video" autoplay></video> <button id="snap">拍照</button> <canvas id="canvas"></canvas> <img id="photo" alt="拍摄的照片">
JavaScript实现：
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const snapButton = document.getElementById('snap');
const photo = document.getElementById('photo');
// 请求摄像头权限并显示视频流
async function startCamera() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
video.srcObject = stream;
} catch (error) {
console.error("无法访问摄像头:", error);
}
}
// 拍照并显示照片
function takePhoto() {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const context = canvas.getContext('2d');
context.drawImage(video, 0, 0, canvas.width, canvas.height);
photo.src = canvas.toDataURL('image/jpeg', 0.8); // 0.8为压缩质量
photo.style.display = 'block';
}
// 初始化
startCamera();
snapButton.addEventListener('click', takePhoto);
说明：
navigator.mediaDevices.getUserMedia请求摄像头权限,返回媒体流。<video>元素实时显示摄像头画面。- 点击“拍照”按钮时，将当前帧绘制到
<canvas>上,并转换为图片显示。 - 可调整
toDataURL的第二个参数（0-1）控制图片压缩质量。
结合Canvas进行图像处理
在WebRTC基础上，可以利用Canvas对拍摄的照片进行进一步处理，如压缩、裁剪等。
示例代码（压缩）：
function compressPhoto(quality) {
const context = canvas.getContext('2d');
const dataURL = canvas.toDataURL('image/jpeg', quality); // quality介于0-1
// 可上传dataURL或转换为Blob再上传
}
说明：
- Canvas的
toDataURL方法支持指定图片格式和压缩质量。 - 可通过调整
quality参数减小图片体积,适合上传前预处理。
相关问答FAQs
Q1：为什么在手机浏览器中使用getUserMedia时，用户需要多次授权？
A1：部分浏览器（尤其是iOS）出于安全考虑，每次页面加载或重新访问摄像头时都会要求用户重新授权，建议在用户首次授权后，将媒体流保存在全局变量中，避免频繁请求权限，确保网站通过HTTPS协议访问，否则无法使用getUserMedia。
Q2：如何优化移动端拍照的性能？
A2：
- 降低分辨率：在
getUserMedia中设置较低的分辨率（如{ video: { width: 640, height: 480 } }），减少数据处理量。 - 按需处理：仅在用户点击拍照时才执行图像处理，避免实时处理导致的卡顿。
- 压缩图片：使用Canvas的
toDataURL方法时，适当降低压缩质量参数（如0.7-0.8），平衡画质与体积。
