要实现手机H5自动显示相机画面，并实现前后摄像头切换，带拍照按钮，拍照后压缩照片到2M以内，显示照片压缩后的base64编码，可以使用HTML5的getUserMedia API来获取摄像头的视频流，并使用canvas来显示相机画面和进行照片压缩。以下是一个简单的示例代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Camera H5</title> </script></head><body> <video id="video" width="350" height=800" autoplay playsinline></video> <button id="switchBtn">切换摄像头</button> <button id="snapBtn">拍照</button> <canvas id="canvas" width="350" height="800"></canvas> <div>++++++++++</div> <div id="dz">显示base64编码</div> <div>+++++++++</div> <script> const video = document.getElementById('video'); const switchBtn = document.getElementById('switchBtn'); const snapBtn = document.getElementById('snapBtn'); const canvas = document.getElementById('canvas'); const constraints = { video: { facingMode: 'environment' }, audio: false }; // 默认使用后置摄像头 let isFrontCamera = false; let stream; // 切换摄像头 switchBtn.addEventListener('click', function() { isFrontCamera = !isFrontCamera; constraints.video.facingMode = isFrontCamera ? 'user' : 'environment'; restartCamera(); }); // 拍照 snapBtn.addEventListener('click', function() { canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); const base64Data = canvas.toDataURL('image/jpeg', 0.8); // 压缩图片到0.8的质量 const fileSizeKB = Math.ceil((base64Data.length / 1024)); // 计算文件大小 if (fileSizeKB > 2048) { // 文件大小超过2M，进行压缩 const img = new Image(); img.src = base64Data; img.onload = function() { const imgWidth = img.width; const imgHeight = img.height; const ratio = Math.sqrt(2048 * 1024 / fileSizeKB); // 计算压缩比例 const canvasTemp = document.createElement('canvas'); const ctxTemp = canvasTemp.getContext('2d'); canvasTemp.width = imgWidth * ratio; canvasTemp.height = imgHeight * ratio; ctxTemp.drawImage(img, 0, 0, canvasTemp.width, canvasTemp.height); const compressedBase64Data = canvasTemp.toDataURL('image/jpeg', 0.8); console.log(compressedBase64Data); // 显示压缩后的base64编码 $("#dz").html(compressedBase64Data); }; } else { console.log(base64Data); // 显示原始base64编码 $("#dz").html(base64Data); } }); function startCamera() { navigator.mediaDevices.getUserMedia(constraints) .then(function(mediaStream) { video.srcObject = mediaStream; stream = mediaStream; }) .catch(function(err) { console.log("无法获取视频流: " + err); }); } function stopCamera() { if (stream) { stream.getTracks().forEach(function(track) { track.stop(); }); } } function restartCamera() { stopCamera(); startCamera(); } startCamera(); </script></body></html> |
在上述代码中，我们通过getUserMedia API获取摄像头的视频流，并将视频流自动播放在页面的<video>标签上。通过点击切换按钮，可以实现前后摄像头的切换。点击拍照按钮时，使用canvas将当前视频帧绘制为图像，并将图像压缩到指定大小。最后，通过console.log打印出压缩后的base64编码。
请注意，由于不同浏览器对getUserMedia API的支持情况可能有所不同，部分浏览器可能需要使用HTTPS协议来访问页面。