手机端H5 实现自定义拍照界面

缘到惜缘随缘去

手机端 H5 实现自定义拍照界面也可以使用 MediaDevices API 和  标签来实现，和在桌面端做法基本一致。
首先，使用 MediaDevices.getUserMedia() 方法获取摄像头媒体流，并将其传递给  标签进行渲染。
接着，使用 HTML 的  标签来截取当前摄像头的画面，通过  上的 getContext('2d') 方法来绘制。
最后，使用 canvas.toDataURL() 方法将图像转换为 base64 格式，可以通过将其保存到本地或发送到服务器来存储照片。
但是需要注意的是，在手机端，调用摄像头需要在 HTTPS 或 localhost 下访问，还需要用户事先进行授权。
且在手机端可能会有些浏览器对于getUserMedia有所限制，需要额外兼容性处理。且手机端的实现需要考虑屏幕的方向，在绘制截图时需要根据不同的屏幕方向调整画布尺寸。
在手机端，为了让用户能够在页面中手动切换摄像头，需要检测手机端设备是否有多个摄像头，在有多个摄像头时，提供给用户切换摄像头的选项。
此外，需要进行一些兼容性处理，以便在不同浏览器和手机设备上正常工作。同时，需要考虑手机端的交互体验，例如提供给用户切换摄像头和调整照片尺寸的选项。
对于一些高级功能，例如人脸检测和识别，美颜，以及其他高级图像处理功能可以使用第三方库，如openCV.js,tracking.js, face-api.js等来实现。
还可以使用框架，如 React Native, Ionic, PhoneGap 等更加轻松地在移动端实现相关功能。
总之，通过使用 MediaDevices API 和  标签在手机端实现自定义拍照界面是可行的，但是需要注意的点比桌面端多一些。虽然在手机端实现自定义拍照界面有一定的挑战，但是通过使用 MediaDevices API 和相关第三方库，还有经验丰富的前端工程师在这个问题上是有解决方案的。
一、实现示例框架代码

1. <video id="camera" width="640" height="480" autoplay></video>
2. <button id="invoking" onclick="invokingCamera">invoking Camera</button>
3. <button id="snapshot" onclick="takeSnapshot">Take snapshot</button>

复制代码

 使用 MediaDevices.getUserMedia() 方法获取摄像头媒体流，并将其传递给  标签进行渲染

1. // 调用摄像头
2. function invokingCamera() {
3.     // 注意本例需要在HTTPS协议网站中运行，新版本Chrome中getUserMedia接口在http下不再支持。
5.     // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
6.     if (navigator.mediaDevices === undefined) {
7.         navigator.mediaDevices = {};
8.     }
10.     // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
11.     // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
12.     if (navigator.mediaDevices.getUserMedia === undefined) {
13.         navigator.mediaDevices.getUserMedia = function (constraints) {
14.             // 首先，如果有getUserMedia的话，就获得它
15.             const getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
16.                 navigator.mozGetUserMedia;
18.             // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
19.             if (!getUserMedia) {
20.                 return Promise.reject(new Error(
21.                     'getUserMedia is not implemented in this browser'));
22.             }
24.             // 否则，为老的navigator.getUserMedia方法包裹一个Promise
25.             return new Promise(function (resolve, reject) {
26.                 getUserMedia.call(navigator, constraints, resolve, reject);
27.             });
28.         }
29.     }
31.     // 手机可视区域宽度（请通过相关API获取真实宽度）
32.     const windowWidth = 375;
33.     // 手机可视区域高度（请通过相关API获取真实高度）
34.     const windowHeight = 700;
36.     const constraints = {
37.         audio: false,
38.         video: {
39.             // 前置摄像头
40.             facingMode: 'user',
41.             // 该属性相当于手机端的高
42.             width: Math.max(windowWidth, windowHeight) - 120,   // 减去 120 用于在页面底部放置拍照等功能按钮
43.             // 该属性相当于手机端的宽
44.             height: Math.min(windowWidth, windowHeight),
45.         }
46.     };
48.     navigator.mediaDevices.getUserMedia(constraints)
49.         .then(function (stream) {
50.             const video = document.querySelector('camera');
51.             // 旧的浏览器可能没有srcObject
52.             if ("srcObject" in video) {
53.                 video.srcObject = stream;
54.             } else {
55.                 // 防止在新的浏览器里使用它，应为它已经不再支持了
56.                 video.src = window.URL.createObjectURL(stream);
57.             }
58.             video.onloadedmetadata = function (e) {
59.                 video.play();
60.             };
61.         })
62.         .catch(function (err) {
63.             console.log(err.name + ": " + err.message);
65.         });
66. }

复制代码

 使用 HTML 的  标签来截取当前摄像头的画面，通过  上的 getContext('2d') 方法来绘制

1. function takeSnapshot() {
2.     const canvas = document.createElement('canvas');
3.     const ctx = canvas.getContext('2d');
4.     const video = document.querySelector('video');
5.     canvas.width = Math.min(video.videoWidth, video.videoHeight);
6.     canvas.height = Math.max(video.videoWidth, video.videoHeight);
7.     ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
9.     // ****** 镜像处理 ******
10.     function getPixel(imageData, row, column) {
11.         const uint8ClampedArray = imageData.data;
12.         const width = imageData.width;
13.         const height = imageData.height;
14.         const pixel = [];
15.         for (let i = 0; i < 4; i++) {
16.             pixel.push(uint8ClampedArray[row * width * 4 + column * 4 + i]);
17.         }
18.         return pixel;
19.     }
21.     function setPixel(imageData, row, column, pixel) {
22.         const uint8ClampedArray = imageData.data;
23.         const width = imageData.width;
24.         const height = imageData.height;
25.         for (let i = 0; i < 4; i++) {
26.             uint8ClampedArray[row * width * 4 + column * 4 + i] = pixel[i];
27.         }
28.     }
30.     const mirrorImageData = ctx.createImageData(canvas.width, canvas.height);
31.     const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
32.     for (let h = 0; h < canvas.height; h++) {
33.         for (let w = 0; w < canvas.width; w++) {
34.             const pixel = getPixel(imageData, h, canvas.width - w - 1);
35.             setPixel(mirrorImageData, h, w, pixel);
36.         }
37.     }
38.     ctx.putImageData(mirrorImageData, 0, 0);
39.     // ****** 镜像处理 ******
41.     const base64 = canvas.toDataURL('image/jpeg');
42. }

复制代码

最后，使用 canvas.toDataURL() 方法将图像转换为 base64 格式，可以通过将其保存到本地或发送到服务器来存储照片
二、具体实现代码（基于uni-app）
布局代码：

1. <template>
2.     <view  >
3.         <video  object-fit="fill"></video>
4.         <view
5.               >
6.             <view
7.                   >
8.                 <image :src="qjkImgSrc" mode="widthFix" ></image>
9.             </view>
10.             <view
11.                   >
12.                 <image :src="qjtxkImgSrc" mode="widthFix" ></image>
13.             </view>
15.             <view
16.                   >
17.                 <view
18.                       >
19.                     <uni-icons type="close" :size="32" @click="handlePhotographCloseClick">
20.                     </uni-icons>
21.                 </view>
22.                 <view   @click="handlePhotographClick">
23.                     <view >
24.                         <view ></view>
25.                     </view>
26.                 </view>
27.                 <view
28.                       >
29.                     <uni-icons type="folder-add" :size="32" @click="handleAddPhotographClick">
30.                     </uni-icons>
31.                 </view>
32.             </view>
33.         </view>
34.     </view>
35. </template>

复制代码

 JavaScript 代码：

1. export default {
2.     data() {
3.         return {
4.             imageUrl: "",
5.             // 媒体流，用于关闭摄像头
6.             mediaStreamTrack: null,
7.         };
8.     },
9.     onLoad() {
10.         this.invokingCamera();
11.     },
12.     onUnload() {
13.         this.handlePhotographCloseClick();
14.     },
15.     methods: {
16.         invokingCamera() {
17.             const self = this;
18.             // 注意本例需要在HTTPS协议网站中运行，新版本Chrome中getUserMedia接口在http下不再支持。
20.             // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
21.             if (navigator.mediaDevices === undefined) {
22.                 navigator.mediaDevices = {};
23.             }
25.             // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
26.             // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
27.             if (navigator.mediaDevices.getUserMedia === undefined) {
28.                 navigator.mediaDevices.getUserMedia = function (constraints) {
29.                     // 首先，如果有getUserMedia的话，就获得它
30.                     const getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
31.                         navigator.mozGetUserMedia;
33.                     // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
34.                     if (!getUserMedia) {
35.                         return Promise.reject(new Error(
36.                             'getUserMedia is not implemented in this browser'));
37.                     }
39.                     // 否则，为老的navigator.getUserMedia方法包裹一个Promise
40.                     return new Promise(function (resolve, reject) {
41.                         getUserMedia.call(navigator, constraints, resolve, reject);
42.                     });
43.                 }
44.             }
46.             uni.getSystemInfo({
47.                 success: function (res) {
48.                     const constraints = {
49.                         audio: false,
50.                         video: {
51.                             // 前置摄像头
52.                             facingMode: 'user',
53.                             // 手机端相当于高
54.                             width: Math.max(res.windowWidth, res.windowHeight) - 120,
55.                             // 手机端相当于宽
56.                             height: Math.min(res.windowWidth, res.windowHeight),
57.                         }
58.                     };
60.                     navigator.mediaDevices.getUserMedia(constraints)
61.                         .then(function (stream) {
62.                             self.mediaStreamTrack = stream;
64.                             const video = document.querySelector('video');
65.                             // 旧的浏览器可能没有srcObject
66.                             if ("srcObject" in video) {
67.                                 video.srcObject = stream;
68.                             } else {
69.                                 // 防止在新的浏览器里使用它，应为它已经不再支持了
70.                                 video.src = window.URL.createObjectURL(stream);
71.                             }
72.                             video.onloadedmetadata = function (e) {
73.                                 video.play();
74.                             };
75.                         })
76.                         .catch(function (err) {
77.                             console.log(err.name + ": " + err.message);
78.                         });
79.                 }
80.             });
81.         },
82.         handlePhotographCloseClick() {
83.             if (this.mediaStreamTrack) {
84.                 // 关闭摄像头
85.                 this.mediaStreamTrack.getTracks().forEach(function (track) {
86.                     track.stop();
87.                 });
88.                 this.mediaStreamTrack = null;
89.             }
90.         },
91.         handlePhotographClick() {
92.             const self = this;
93.             const canvas = document.createElement('canvas');
94.             const ctx = canvas.getContext('2d');
95.             const video = document.querySelector('video');
96.             canvas.width = Math.min(video.videoWidth, video.videoHeight);
97.             canvas.height = Math.max(video.videoWidth, video.videoHeight);
98.             ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
100.             // ****** 镜像处理 ******
101.             function getPixel(imageData, row, column) {
102.                 const uint8ClampedArray = imageData.data;
103.                 const width = imageData.width;
104.                 const height = imageData.height;
105.                 const pixel = [];
106.                 for (let i = 0; i < 4; i++) {
107.                     pixel.push(uint8ClampedArray[row * width * 4 + column * 4 + i]);
108.                 }
109.                 return pixel;
110.             }
112.             function setPixel(imageData, row, column, pixel) {
113.                 const uint8ClampedArray = imageData.data;
114.                 const width = imageData.width;
115.                 const height = imageData.height;
116.                 for (let i = 0; i < 4; i++) {
117.                     uint8ClampedArray[row * width * 4 + column * 4 + i] = pixel[i];
118.                 }
119.             }
121.             const mirrorImageData = ctx.createImageData(canvas.width, canvas.height);
122.             const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
123.             for (let h = 0; h < canvas.height; h++) {
124.                 for (let w = 0; w < canvas.width; w++) {
125.                     const pixel = getPixel(imageData, h, canvas.width - w - 1);
126.                     setPixel(mirrorImageData, h, w, pixel);
127.                 }
128.             }
129.             ctx.putImageData(mirrorImageData, 0, 0);
130.             // ****** 镜像处理 ******
132.             self.$nextTick(() => {
133.                 const base64 = canvas.toDataURL('image/jpeg');
134.                 self.imageUrl = base64;
135.                 self.handlePhotographCloseClick();
136.             });
137.         },
138.         handleAddPhotographClick() {
139.             this.uploadImage();
140.         },
141.         uploadImage: function () {
142.             const self = this;
143.             uni.chooseImage({
144.                 count: 1,
145.                 sizeType: ['compressed'],
146.                 success: function (res) {
147.                     self.handlePhotographCloseClick();
148.                     const file = res.tempFiles[0];
150.                     const reader = new FileReader();
151.                     reader.readAsDataURL(file);
152.                     reader.onload = function (e) {
153.                         self.imageUrl = e.target.result;
154.                     }
155.                 }
156.             });
157.         },
158.     }
159. };

复制代码

样式代码：
[code][/code]最终效果展示：

来源:https://www.cnblogs.com/yuzhihui/p/17044075.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！