h5-capture 使用和明细

西南_张家辉

发布于 2021-02-02 10:04:34

1.9K0

这里要用到一个 h5 的属性capture

由于h5项目中使用到了文件上传的功能，这里来写一下 html5的一个属性 capture 的使用。
直接使用 type= "file" 加上 accept="image/*"就会默认调起系统的图片文件。
当你需要直接唤起相机的时候 capture="camera"
需要支持多选的时候 multiple="multiple"

<input type="file" id="camera" multiple="multiple" capture="camera" accept="image/*">


复制代码

下面是关于 capture 属性的详细阐述

概述

The HTML Media Capture specification extends the HTMLInputElement interface with a capture attribute. The capture attribute allows authors to declaratively request use of a media capture mechanism, such as a camera or microphone, from within a file upload control, for capturing media on the spot.
这个 html 的媒体属性允许开发者调用一些设备的媒体功能。

调用前置摄像头

To take a picture using the device's user-facing camera, and upload the picture taken using an HTML form:

<form action="server.cgi" method="post" enctype="multipart/form-data">
  <input type="file" name="image" accept="image/*" capture="user">
  <input type="submit" value="Upload">
form>
复制代码

调用后置摄像头

Or alternatively, to capture video using the device's local video camera facing the environment:

<form action="server.cgi" method="post" enctype="multipart/form-data">
  <input type="file" name="video" accept="video/*" capture="environment">
  <input type="submit" value="Upload">
form>
复制代码

调用麦克风和摄像

Or alternatively, to capture audio using the device's local microphone (without preferred facing mode defined, falls back to the implementation-specific default facing mode):

<form action="server.cgi" method="post" enctype="multipart/form-data">
  <input type="file" name="audio" accept="audio/*" capture>
  <input type="submit" value="Upload">
form>
复制代码

处理上传文件-XMLHttpRequest、

And handle the file upload in script via XMLHttpRequest:

var input = document.querySelector('input[type=file]'); // see Example 4

input.onchange = function () {
  var file = input.files[0];

  upload(file);
  drawOnCanvas(file);   // see Example 6
  displayAsImage(file); // see Example 7
};

function upload(file) {
  var form = new FormData(),
      xhr = new XMLHttpRequest();

  form.append('image', file);
  xhr.open('post', 'server.php', true);
  xhr.send(form);
}
复制代码

使用 fileReader 和 canvas

The image can also be displayed on the client-side without uploading it e.g. for client-side image editing purposes, using the FileReader and a canvas element:

function drawOnCanvas(file) {
  var reader = new FileReader();

  reader.onload = function (e) {
    var dataURL = e.target.result,
        c = document.querySelector('canvas'), // see Example 4
        ctx = c.getContext('2d'),
        img = new Image();

    img.onload = function() {
      c.width = img.width;
      c.height = img.height;
      ctx.drawImage(img, 0, 0);
    };

    img.src = dataURL;
  };

  reader.readAsDataURL(file);
}
复制代码

很多时间我们会处理上传的文件为 canvas

使用 createObjectURL（）和图片处理

Or alternatively, to just display the image, using the createObjectURL() method and an img element:

function displayAsImage(file) {
  var imgURL = URL.createObjectURL(file),
      img = document.createElement('img');

  img.onload = function() {
    URL.revokeObjectURL(imgURL);
  };

  img.src = imgURL;
  document.body.appendChild(img);
}
复制代码