h5开发app如何调用手机拍照功能

近年来，移动互联网的发展使得移动端应用开发越来越受到关注，其中h5开发技术在移动端应用中广泛应用。h5开发技术的优势在于可以使用一种技术开发多个平台的应用，在使用上十分方便快捷。本文将介绍如何通过h5开发技术调用移动设备的拍照功能。

一、前置知识

在介绍调用移动设备拍照功能的方法之前，我们需要先了解一些前置知识。

1. HTML5 File API

HTML5 File API 是一组 API 主要用于读取和操作本地文件。其中，FileReader API 可以用来读取本地文件（如图片、音频等）并将其显示在浏览器中。另外，HTML5 File API 中还有其他 APIs，如：File Interface、FileList Interface、Blob Interface 等等，这些 API 用于文件的处理。

2. 相机 API

移动设备的相机 API 主要用于打开摄像头、拍照、录像等功能。

二、调用拍照功能实现步骤

了解了前置知识之后，下面我们来详细介绍如何调用移动设备拍摄照片的功能。

1. 使用 HTML input 标签

我们可以使用 HTML 中的 input 标签实现拍照功能。通过设置 input 标签的 type 属性为 file 和 accept 属性为 image/*，就可以启动移动设备的拍照功能并保存照片到本地。

```html

```

但是，在 Android 中会弹出文件选择框，需要手动选择拍照或相册才能拍照。

2. 使用 Camera API

使用 Camera API 可以直接启动相机，实现拍照功能通常通过调用 navigator.mediaDevices.getUserMedia() 方法，该方法返回一个媒体流。我们可以通过设置这个媒体流来打开相机，然后获取到拍摄的相片。

```javascript

navigator.mediaDevices.getUserMedia({

audio: false,

video: {

facingMode: "user",

width: {

min: 320,

ideal: 640,

max: 1920

},

height: {

min: 240,

ideal: 480,

max: 1080

}

}

}).then(function(stream) {

var video = document.querySelector('video');

video.srcObject = stream;

video.onloadedmetadata = function(e) {

video.play();

};

}).catch(function(err) {

console.log(err);

});

```

上述代码中，首先通过 navigator.mediaDevices.getUserMedia() 方法获取到一个媒体流，该媒体流用于打开相机。然后，通过设置 video 标签的 srcObject 属性启动相机并显示在页面上。

在拍照后，我们可以使用 canvas 将获取到的视频流转化为图片，并将其保存。

```javascript

var canvas = document.createElement('canvas');

var ctx = canvas.getContext('2d');

canvas.width = video.videoWidth;

canvas.height = video.videoHeight;

ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

var dataURL = canvas.toDataURL('image/jpeg');

```

上述代码中，首先创建一个 canvas 元素，用于显示视频流。然后，使用 drawImage() 方法将视频流渲染到 canvas 中。最后，使用 toDataURL() 方法将 canvas 中的内容转换为图片的 base64 编码格式。

三、总结

通过本文的介绍，我们学习了如何使用 h5 开发技术调用移动设备的拍照功能。其中，调用拍照功能有两种方法：使用 HTML input 标签和使用 Camera API。在实际开发中可以根据不同的需求选择不同的方法。