diff options
Diffstat (limited to 'files/zh-cn/web/guide/api/camera/index.html')
| -rw-r--r-- | files/zh-cn/web/guide/api/camera/index.html | 219 |
1 files changed, 219 insertions, 0 deletions
diff --git a/files/zh-cn/web/guide/api/camera/index.html b/files/zh-cn/web/guide/api/camera/index.html new file mode 100644 index 0000000000..64fe08d634 --- /dev/null +++ b/files/zh-cn/web/guide/api/camera/index.html @@ -0,0 +1,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> |