1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
|
---
title: 使用Camera API
slug: Web/Guide/API/Camera
translation_of: Archive/B2G_OS/API/Camera_API/Introduction
---
<p>通过<a class="link-https" href="https://wiki.mozilla.org/Platform/Features/Camera_API">Camera API</a>,你可以使用手机的摄像头拍照,然后把拍到的照片发送给当前网页.这些操作主要是通过一个<code>input元素</code>来实现的,其中该元素的<code>type属性必须为"file",</code><code>accept属性要允许图片格式,</code>这样才能知道这个文件选择框是用来选择图片的.,完整的HTML结构看起来是这样的:</p>
<pre class="brush: html"><input type="file" id="take-picture" accept="image/*">
</pre>
<p>当用户激活这个HTML元素的时候,系统会呈现给用户一个选择界面,其中一个选项是选择本地的图片文件,另一个选项是要通过摄像头直接 拍摄照片作为所选文件.如果用户选择了摄像头,则会进入手机的拍照模式.拍照结束后,,用户可以选择确定还是放弃.如果接受了,则该照片会作为所选文件发 送给那个<code><input type="file"></code>元素,同时触发该元素的<code>onchange事件</code>.</p>
<h2 id="获取到所拍摄照片的引用">获取到所拍摄照片的引用</h2>
<p>通过<a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">File API</a>,你可以获取到用户所拍摄的照片或者所选择的图片文件的引用:</p>
<pre class="brush: js">var takePicture = document.querySelector("#take-picture");
takePicture.onchange = function (event) {
// 获得图片文件的引用
var files = event.target.files,
file;
if (files && files.length > 0) {
file = files[0];
}
};
</pre>
<h2 id="在网页中展示图片">在网页中展示图片</h2>
<p>如果你获取到了那张照片的引用(也就是File对象),你就可以使用{{ domxref("window.URL.createObjectURL()") }}方法创建一个指向那个照片的URL,然后把得到的URL赋给<code>img</code>元素的<code>src属性</code>:</p>
<pre class="brush: js">// 获取到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);
</pre>
<p>如果浏览器不支持<code>createObjectURL()</code>方法,还可以使用{{ domxref("FileReader") }}来实现:</p>
<pre class="brush: js">// 如果createObjectURL方法不可用
var fileReader = new FileReader();
fileReader.onload = function (event) {
showPicture.src = event.target.result;
};
fileReader.readAsDataURL(file);
</pre>
<h2 id="完整的示例代码">完整的示例代码</h2>
<p>这里有一个<a class="external" href="http://robnyman.github.com/camera-api/">完整的使用Camera API的demo</a>,下面是这个demo的完整代码:</p>
<h3 id="HTML页面">HTML页面:</h3>
<pre class="brush: 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>
</pre>
<h3 id="JavaScript文件">JavaScript文件:</h3>
<pre class="brush: js">(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";
}
}
}
}
};
}
})();
</pre>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Camera API</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
</tr>
<tr>
<td><code><a href="/en-US/docs/DOM/window.URL.createObjectURL" title="/en-US/docs/DOM/window.URL.createObjectURL">createObjectURL()</a></code></td>
<td>16</td>
<td>{{CompatGeckoDesktop("8.0")}}</td>
<td>10+</td>
<td>{{CompatNo()}}</td>
<td>{{CompatNo()}}</td>
</tr>
<tr>
<td>{{domxref("FileReader")}}</td>
<td>16</td>
<td>{{CompatGeckoDesktop("1.9.2")}}</td>
<td>10+</td>
<td>11.6+</td>
<td>{{CompatNo()}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Camera API</td>
<td>3.0</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatGeckoMobile("10.0") }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
</tr>
<tr>
<td><code><a href="/en-US/docs/DOM/window.URL.createObjectURL" title="/en-US/docs/DOM/window.URL.createObjectURL">createObjectURL()</a></code></td>
<td>4</td>
<td>{{CompatVersionUnknown()}}</td>
<td>{{CompatGeckoMobile("10.0")}}</td>
<td>{{CompatNo()}}</td>
<td>{{CompatNo()}}</td>
<td>{{CompatNo()}}</td>
</tr>
<tr>
<td>{{domxref("FileReader")}}</td>
<td>3</td>
<td>{{CompatVersionUnknown()}}</td>
<td>{{CompatGeckoMobile("10.0")}}</td>
<td>{{CompatNo()}}</td>
<td>11.1</td>
<td>{{CompatNo()}}</td>
</tr>
</tbody>
</table>
</div>
<p> </p>
|
