From a065e04d529da1d847b5062a12c46d916408bf32 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 21:46:22 -0500 Subject: update based on https://github.com/mdn/yari/issues/2028 --- files/zh-cn/web/guide/api/camera/index.html | 219 ------------------- .../guide/css/getting_started/xml_data/index.html | 241 --------------------- 2 files changed, 460 deletions(-) delete mode 100644 files/zh-cn/web/guide/api/camera/index.html delete mode 100644 files/zh-cn/web/guide/css/getting_started/xml_data/index.html (limited to 'files/zh-cn/web/guide') diff --git a/files/zh-cn/web/guide/api/camera/index.html b/files/zh-cn/web/guide/api/camera/index.html deleted file mode 100644 index 64fe08d634..0000000000 --- a/files/zh-cn/web/guide/api/camera/index.html +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: 使用Camera API -slug: Web/Guide/API/Camera -translation_of: Archive/B2G_OS/API/Camera_API/Introduction ---- -

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

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

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

-

获取到所拍摄照片的引用

-

通过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];
-    }
-};
-
-

在网页中展示图片

-

如果你获取到了那张照片的引用(也就是File对象),你就可以使用{{ domxref("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()方法,还可以使用{{ domxref("FileReader") }}来实现:

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

完整的示例代码

-

这里有一个完整的使用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";
-                        }
-                    }
-                }
-            }
-        };
-    }
-})();
-
-

浏览器兼容性

-

{{ CompatibilityTable() }}

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Camera API{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
createObjectURL()16{{CompatGeckoDesktop("8.0")}}10+{{CompatNo()}}{{CompatNo()}}
{{domxref("FileReader")}}16{{CompatGeckoDesktop("1.9.2")}}10+11.6+{{CompatNo()}}
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Camera API3.0{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("10.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
createObjectURL()4{{CompatVersionUnknown()}}{{CompatGeckoMobile("10.0")}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
{{domxref("FileReader")}}3{{CompatVersionUnknown()}}{{CompatGeckoMobile("10.0")}}{{CompatNo()}}11.1{{CompatNo()}}
-
-

 

diff --git a/files/zh-cn/web/guide/css/getting_started/xml_data/index.html b/files/zh-cn/web/guide/css/getting_started/xml_data/index.html deleted file mode 100644 index bbdbd784f5..0000000000 --- a/files/zh-cn/web/guide/css/getting_started/xml_data/index.html +++ /dev/null @@ -1,241 +0,0 @@ ---- -title: XML 数据 -slug: Web/Guide/CSS/Getting_started/XML_data -tags: - - CSS - - Web - - 中级 - - 实例 - - 开始学CSS - - 指南 - - 需要更新 -translation_of: Archive/Beginner_tutorials/XML_data ---- -

{{ CSSTutorialTOC() }}

- -

此页面包含一个如何使用CSS和XML数据的示例。

- -

你将创建一个XML文档范例，和使之在浏览器中展现的样式表。

- -

这是 CSS tutorial 第二部分的第三节。
- 前一章节: SVG
- 后一章节:  XBL binding

- -

信息: XML 数据

- -

XML (eXtensible Markup Language 可扩展标记语言) 是一种可用于任何类型的结构化数据的通用型语言。

- -

默认情况下，Mozilla 浏览器会将 XML 按照非常类似XML文件的原始数据的方式展现。你可以看到定义数据结构的具体的标签。

- -

通过将你的XML文档与CSS样式表链接，你可以定义展现XML的其他方式。为了实现这一点，样式表建立了映射规则，将XML文档中的标签映射为HTML中使用的展现类型。

- - - - - - - - -
示例
XML文档中的数据采用<INFO> 标签。你希望文档中的 INFO 元素像 HTML 的段落一样展现。. -

在该文档的样式表中，你指定了 INFO 元素的展现方式：

- -
- 
-INFO {
-  display: block;
-  margin: 1em 0;
-  }
-
-
-
- -

在display属性中最常用的值是：

- - - - - - - - - - - - -
blockDisplayed like HTML's DIV (for headings, paragraphs)
inlineDisplayed like HTML's SPAN (for emphasis within text)
- -

如同对待HTML一样，通过设置字体、间距和其他细节来添加你自己的样式规则。

- - - - - - - - -
更多细节
其他display的值可以展现类似于列表项目的元素，或者类似表格组件的元素。 -

请查看CSS规范中的The display property ，来获取全部display类型。

- -

单独使用CSS，display的结构必须与文档结构一致。其它方式是修改display的结构—例如：使用XBL添加内容，使用JavaScript修改DOM。

- -

请查看 XML 页面，来获取更多关于XML in Mozilla的信息。

-
- -

实例: XML 演示

- -

新建一个 XML 文件： doc9.xml 。复制粘帖以下内容，注意滚动以获得全部：

- -
-
<?xml version="1.0"?>
-<!-- XML demonstration -->
-
-<?xml-stylesheet type="text/css" href="style9.css"?>
-
-<!DOCTYPE planet>
-<planet>
-
-<ocean>
-<name>Arctic</name>
-<area>13,000</area>
-<depth>1,200</depth>
-</ocean>
-
-<ocean>
-<name>Atlantic</name>
-<area>87,000</area>
-<depth>3,900</depth>
-</ocean>
-
-<ocean>
-<name>Pacific</name>
-<area>180,000</area>
-<depth>4,000</depth>
-</ocean>
-
-<ocean>
-<name>Indian</name>
-<area>75,000</area>
-<depth>3,900</depth>
-</ocean>
-
-<ocean>
-<name>Southern</name>
-<area>20,000</area>
-<depth>4,500</depth>
-</ocean>
-
-</planet>
-
-
- -

新建一个 CSS 文件： style9.css 。复制粘帖以下内容，注意滚动以获得全部：

- -
-
/*** XML demonstration ***/
-
-planet:before {
-  display: block;
-  width: 8em;
-  font-weight: bold;
-  font-size: 200%;
-  content: "Oceans";
-  margin: -.75em 0px .25em -.25em;
-  padding: .1em .25em;
-  background-color: #cdf;
-  }
-
-planet {
-  display: block;
-  margin: 2em 1em;
-  border: 4px solid #cdf;
-  padding: 0px 1em;
-  background-color: white;
-  }
-
-ocean {
-  display: block;
-  margin-bottom: 1em;
-  }
-
-name {
-  display: block;
-  font-weight: bold;
-  font-size: 150%;
-  }
-
-area {
-  display: block;
-  }
-
-area:before {
-  content: "Area: ";
-  }
-
-area:after {
-  content: " million km\B2";
-  }
-
-depth {
-  display: block;
-  }
-
-depth:before {
-  content: "Mean depth: ";
-  }
-
-depth:after {
-  content: " m";
-  }
-
-
- -

在你的浏览器中打开该文档：

- - - - - - - -
-
-

Oceans

- -

Arctic
- Area: 13,000 million km²
- Mean depth: 1,200 m

- -

Atlantic
- Area: 87,000 million km²
- Mean depth: 3,900 m

- -

. . .

-
-
- -


- 此演示的注解：

- - - -

 

- - - - - - - - -
挑战
修改样式表使文档可以作为表格展现。 -

（请参见 CSS 规范的 Tables 章节作为参考。）

-
- -

接下来？

- -

如果你难以理解此页面，或者你有其他意见，请提交到讨论页： Discussion 。

- -

这是本教程的最后一页。请查看此 wiki 的 CSS 主页，获取更多Mozilla CSS 信息。

-- cgit v1.2.3-54-g00ecf