使用Camera API

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

<input type="file" id="take-picture" accept="image/*">

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

获取到所拍摄照片的引用EDIT

通过File API,你可以获取到用户所拍摄的照片或者所选择的图片文件的引用:

var takePicture = document.querySelector("#take-picture");
takePicture.onchange = function (event) {
// 获得图片文件的引用
var files = event.target.files,
file;
if (files && files.length > 0) {
file = files[0];
}
};

在网页中展示图片EDIT

如果你获取到了那张照片的引用(也就是File对象),你就可以使用window.URL.createObjectURL()方法创建一个指向那个照片的URL,然后把得到的URL赋给img元素的src属性:

// 获取到img元素
var showPicture = document.querySelector("#show-picture"); // 获取到window.URL对象
var URL = window.URL || window.webkitURL; // 创建一个对象URL字符串
var imgURL = URL.createObjectURL(file); // 设置img元素的src属性为那个URL
showPicture.src = imgURL; // 释放那个对象URL,提高性能
URL.revokeObjectURL(imgURL);

如果浏览器不支持createObjectURL()方法,还可以使用FileReader来实现:

// 如果createObjectURL方法不可用
var fileReader = new FileReader();
fileReader.onload = function (event) {
showPicture.src = event.target.result;
};
fileReader.readAsDataURL(file);

完整的示例代码EDIT

这里有一个完整的使用Camera API的demo,下面是这个demo的完整代码:

HTML页面:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Camera API</title>
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen">
</head> <body> <div class="container">
<h1>Camera API</h1> <section class="main-content">
<p>A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too).</p> <p>
<input type="file" id="take-picture" accept="image/*">
</p> <h2>Preview:</h2>
<p>
<img src="about:blank" alt="" id="show-picture">
</p> <p id="error"></p> </section> <p class="footer">All the code is available in the <a href="https://github.com/robnyman/robnyman.github.com/tree/master/camera-api">Camera API repository on GitHub</a>.</p>
</div> <script src="js/base.js"></script> </body>
</html>

JavaScript文件:

(function () {
var takePicture = document.querySelector("#take-picture"),
showPicture = document.querySelector("#show-picture"); if (takePicture && showPicture) {
// Set events
takePicture.onchange = function (event) {
// Get a reference to the taken picture or chosen file
var files = event.target.files,
file;
if (files && files.length > 0) {
file = files[0];
try {
// Get window.URL object
var URL = window.URL || window.webkitURL; // Create ObjectURL
var imgURL = URL.createObjectURL(file); // Set img src to ObjectURL
showPicture.src = imgURL; // Revoke ObjectURL
URL.revokeObjectURL(imgURL);
}
catch (e) {
try {
// Fallback if createObjectURL is not supported
var fileReader = new FileReader();
fileReader.onload = function (event) {
showPicture.src = event.target.result;
};
fileReader.readAsDataURL(file);
}
catch (e) {
//
var error = document.querySelector("#error");
if (error) {
error.innerHTML = "Neither createObjectURL or FileReader are supported";
}
}
}
}
};
}
})();

浏览器兼容性EDIT

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Camera API Not supported Not supported Not supported Not supported Not supported
createObjectURL() 16 8.0 (8.0) 10+ Not supported Not supported
FileReader 16 3.6 (1.9.2) 10+ 11.6+ Not supported

使用Camera API https://developer.mozilla.org/zh-CN/docs/Web/Guide/API/Camera的更多相关文章

  1. https://developer.mozilla.org/

    Document/querySelector      https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector

  2. Introduction to Object-Oriented JavaScript 转载自:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

    Introduction to Object-Oriented JavaScript IN THIS ARTICLE JavaScript review Object-oriented program ...

  3. A re-introduction to JavaScript (JS Tutorial) 转载自:https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript

    A re-introduction to JavaScript (JS Tutorial) Redirected from https://developer.mozilla.org/en-US/do ...

  4. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError

  5. 如何从https://developer.mozilla.org上查询对象的属性、方法、事件使用说明和示例

    在https://developer.mozilla.org搜索要在前面加上指令 搜索之后点进去 进入之后就是这样的 在页面左边你可以选择自己要查询的对象 里面就是会有属性.方法.事件使用说明和示例.

  6. HTML5Canvas标签(https://developer.mozilla.org)

  7. for ...in 、for each ...in、 for...of(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of)

    1.for in for...in语句以任意顺序遍历一个对象的可枚举性.对于每个不同的属性,语句都会被执行. 语法 for (variable in object) {...} variable 在每 ...

  8. js对象 数组Array详解 (参照MDN官网:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)

    一:数组的创建方式: 1.采用直接量创建 var arr = [];//创建一个空数组 var arr2 = [1,2,3];//创建一个有三个元素的数组 2.采用构造函数创建 a.var arr1 ...

  9. Object.keys() https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

    Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用for...in 循环遍历该对象时返回的顺序一致 (两者的主要区别是 一个 for-in ...

随机推荐

  1. 6月20日 Django中ORM介绍和字段、字段参数、相关操作

    一.Django中ORM介绍和字段及字段参数 二.Django ORM 常用字段和参数 三.Django ORM执行原生SQL.在Python脚本中调用Django环境.Django终端打印SQL语句 ...

  2. python 输入加密的MD5值,并搜索文件中的原始值

    此程序可以输入一串MD5的值,并在指定的文件中搜索到原始值.程序自有用处. #输入加密的MD5值,并搜索文件中的原始值 by qianxiao996 #博客地址:https://blog.csdn.n ...

  3. 分治FFT/NTT

    粘板子: #include<cstdio> #include<cstring> #include<algorithm> using namespace std; t ...

  4. Python 分形算法__代码里开出来的艺术之花

    1. 前言 分形几何是几何数学中的一个分支,也称大自然几何学,由著名数学家本华曼德勃罗( 法语:BenoitB.Mandelbrot)在 1975 年构思和发展出来的一种新的几何学. 分形几何是对大自 ...

  5. 保姆教程系列一、Linux搭建Nacos

    前言: 请各大网友尊重本人原创知识分享,谨记本人博客:南国以南i 简介: Nacos是阿里巴巴开源的一款支持服务注册与发现,配置管理以及微服务管理的组件.用来取代以前常用的注册中心(zookeeper ...

  6. Postman请求报错:Error:getaddrinfo ENOENT 50.88.88.88

    一.问题来源 今天发布一个新开发的项目到通州现场,内容是开放几个接口给第三方调用,需要现场部署的同事使用postman调用测试一下,现场同事使用postman调用后反馈有如下错误: 二.解决方法 发现 ...

  7. 【Java】这 35 个 Java 代码优化细节!

    前言 代码 优化 ,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没 ...

  8. 解释内存中的栈(stack)、堆(heap)和方法区(method area) 的用法?

    通常我们定义一个基本数据类型的变量,一个对象的引用,还有就是函数调用的 现场保存都使用 JVM 中的栈空间:而通过 new 关键字和构造器创建的对象则放在 堆空间,堆是垃圾收集器管理的主要区域,由于现 ...

  9. BIO、NIO、AIO的区别

    一.基本概念 1.BIO:同步阻塞IO 2.NIO:同步非阻塞IO 3.AIO:异步阻塞IO IO操作包括两部分,发起IO请求.IO数据读写.阻塞非阻塞主要针对线程发起IO请求之后是否立即返回来定义的 ...

  10. 二、mycat15种分片规则

    一.分片枚举 通过在配置文件中配置可能的枚举 id,自己配置分片,本规则适用于特定的场景,比如有些业务需要按照省份或区县来做保存,而全国省份区县固定的,这类业务使用本条规则,配置如下: <tab ...