HTML5调用移动设备摄像头拍照

清晨回笼做梦 2019-06-14

629

在项目需求要求下，了解到用HTML5调用摄像头来实现拍照功能，今天就把大致的实现过程写下来。

由于系统前端是用angular7 来开发的，下面我就展示如何在angular环境使用Camera API调用。

引用一下官方的说明：

通过Camera API,你可以使用手机的摄像头拍照,然后把拍到的照片发送给当前网页.这些操作主要是通过一个input元素来实现的,其中该元素的type属性必须为"file",accept属性要允许图片格式,这样才能知道这个文件选择框是用来选择图片的.

HTML页面

<button id="picture" (click)="picture()">拍照</button>
    <input type="file" capture="camera" (change)="changeImg($event)" 
    accept="image/*" id="cameraInput" style="display: none" name="cameraInput">
    <p>
        <img src="" alt="" id="show-picture">
    </p>

当用户激活这个HTML元素的时候,系统会呈现给用户一个选择界面,其中一个选项是选择本地的图片文件,另一个选项是要通过摄像头直接拍摄照片作为所选文件.如果用户选择了摄像头,则会进入手机的拍照模式.拍照结束后,,用户可以选择确定还是放弃.如果接受了,则该照片会作为所选文件发送给那个<input type="file">元素,同时触发该元素的onchange事件.

TS代码

这里我是为了系统方便，将调用封装成公共的方法注册到service中

xxx.service.ts

import { Injectable } from '@angular/core';


@Injectable({
    providedIn: 'root'
})
export class CameraService {
    constructor(){
    }
    //传入参数 1.需要展示照片的dom元素，2.event 
    takePicture(showPictureSrc,event) {
        var files = event.target.files, file;
        if (files && files.length > 0) {
          file = files[0];
          console.log(file)
          try {
            var fileReader = new FileReader();
            fileReader.onload = (event) => {
               // showPictureSrc.src = event.target.result;
               showPictureSrc.src = (event.target as any).result;
            };
            fileReader.readAsDataURL(file);
          }
          catch (e) {
            console.log(e.error)
          } 
        }
      }
}

注意：上面ts代码注释部分会报错

原因：因为fileReader.readAsDataURL会将图片转换成base64编码,再通过FileReader对象的onload方法返回回来，但是TypeScript编译器不知道返回的是一个什么类型，event.target默认是"EventTarget"类型，而result是"string"类型,所以会报错

解决方法：showPictureSrc.src = (event.target as any).result;

TS主文件调用方法

import { Component, OnInit } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd';
// 引入service
import {CameraService} from './services/camera.service'


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  showPicture;
  constructor(
    private message: NzMessageService,
    private camera: CameraService
  ) { }
  ngOnInit() {
    this.showPicture = document.getElementById('show-picture');
  }
  // 点击拍照按钮 触发相应的拍照或者相册选择文件事件
  picture() {
    let that = this;
    var cameraInput = document.getElementById('cameraInput');
    var a=document.createEvent("MouseEvents");
    a.initEvent("click", true, true);  
    //绑定操作
    cameraInput.dispatchEvent(a);
  }
  
  //调用封装的方法 注意参数 1 传入需要展示的image的dom元素
  changeImg(event) {
    const that = this;
    that.showPicture.style.display = 'block';
    that.camera.takePicture(that.showPicture,event);
  }
  //如果需要将图片传给后台， 参数src给接口就可以了
  submitImg() {
  console.log(this.showPicture.src);
  }
  }

大功告成了！

兼容性问题

测试效果还OK，可能会存在上述兼容性问题，如果要实现拍照蒙版，只能在图片获取到页面后再截取图片，无法实现给调用的本机摄像界面添加蒙版取景框。

文章转载自清晨回笼做梦，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

HTML5调用移动设备摄像头拍照

评论