在移动端网页开发中，用户上传图片是一个非常常见的需求。为了提升用户体验，许多网站都采用了直接拍照上传的方式。本文将介绍如何使用JS实现手机拍照上传功能。
前置知识
- HTML5 File API
- getUserMedia API
实现过程
步骤一：调用摄像头
getUserMedia API可以访问设备的媒体设备，包括摄像头和麦克风。我们可以使用该API来访问设备的摄像头，并在页面中展示所拍摄的照片。
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(stream => {
const video = document.querySelector('video');
video.srcObject = stream;
video.play();
})
.catch(err => console.log(err));以上代码通过调用getUserMedia API来获取视频流，然后将其赋值给video元素的srcObject属性，并播放视频。
步骤二：截取照片
调用摄像头之后，我们需要从视频流中截取照片并展示在页面上。HTML5 File API可以帮助我们完成这个任务。该API提供了FileReader对象，它可以读取文件并将其展示在页面上。
-- -------------------- ---- ------- ----- ------ - --------------------------------- ----- ------- - ------------------------ --------------------------------- -- -- - ------------ - ----------------- ------------- - ------------------ --- -------- --------- - ------------------------ -- -- ------------- --------------- ----- ---- - ------------------------------ ----- --- - ------------------------------ ------- - ----- ------------------------------- -
以上代码会在video元素可以播放时，创建一个canvas元素，并将它的尺寸设置为视频的尺寸。接着，在capture函数中，我们可以使用drawImage方法从视频流中截取照片，并将其绘制到canvas上。最后，通过调用toDataURL方法将canvas转换为base64编码的字符串，并将其赋值给img元素的src属性。
步骤三：上传照片
完成截取照片之后，我们需要将照片上传到服务器。可以通过AJAX或者form表单的方式将照片发送到服务器。
-- -------------------- ---- ------- ----- ---- - --- ----------- ------------------- ----- ------------- ---------------- - ------- ------- ----- ---- -- -------------- -- ---------------------- ---------- -- ------------------
以上代码使用FormData对象来存储照片，并使用fetch API将其发送到服务器。其中，blob参数是由canvas生成的二进制文件。
总结
本文介绍了如何使用JS实现手机拍照上传功能。通过调用getUserMedia和HTML5 File API，我们可以轻松地访问设备的摄像头、截取照片并上传到服务器。这种实现方式可以提高用户体验，降低用户上传照片的门槛，也为移动端网页开发提供了更多可能性。
示例代码：https://codepen.io/ChatGPT/pen/oNvWMvo
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1102