recursal/MDN huggingface dataset:
InputEvent.dataTransfer
=======================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`InputEvent` 接口中的只读属性 **`dataTransfer`** 返回一个 `DataTransfer` 对象，该对象包含有关要添加到可编辑内容，或从可编辑内容中删除的富文本或纯文本数据的信息。

语法
--
```

var dataTransfer = inputEvent.dataTransfer
```

### 返回值

一个 `DataTransfer` 对象。

示例
--

在下面的简单示例中，我们在 input 事件上设置了一个事件监听器，以便在将任何内容粘贴到 `<p>` 元素时，通过 `InputEvent.dataTransfer.getData()` 方法检索其 HTML 源代码，并在输入框下面的段落中报告。

尝试复制并粘贴提供的部分内容以查看效果。注意，部分浏览器对其支持不佳。


```html
<p><span style="font-weight: bold; color: blue">Whoa, bold blue text!</span></p>
<p>
  <span style="font-weight: italic; color: red"
 >Exciting: italic red text!</span
 >
</p>
<p>Boring normal text ;-(</p>

<hr />

<p contenteditable="true">
  Go on, try pasting some content into this editable paragraph and see what
  happens!
</p>

<p class="result"></p>
```



```js
var editable = document.querySelector("p[contenteditable]");
var result = document.querySelector(".result");
var dataTransferObj;

editable.addEventListener("input", (e) => {
  result.textContent = e.dataTransfer.getData("text/html");
});
```

规范
--

| Specification |
| --- |
| Input Events Level 2 # dom-inputevent-datatransfer |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
InputEvent：isComposing 属性
=========================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`InputEvent.isComposing`** 只读属性返回一个布尔值，表示事件是否是在 `compositionstart` 之后且在 `compositionend` 之前触发的。

返回值
---

一个布尔值。

示例
--


```js
const inputEvent = new InputEvent("syntheticInput", false);
console.log(inputEvent.isComposing); // 返回 false
```

规范
--

| Specification |
| --- |
| UI Events # dom-inputevent-iscomposing |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `compositionstart` 和 `compositionend`
* `InputEvent`
InputEvent()
============

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

构造函数 **`InputEvent()`** 返回一个新创建的 `InputEvent` 对象。

语法
--
```

 event = new InputEvent(typeArg, inputEventInit);
```

### 参数

*typeArg*

一个 `DOMString` ，表示事件的名称。

*inputEventInit*可选

一个 `InputEventInit` 字典，有以下字段：

* `inputType`（可选），指定可编辑内容更改类型的字符串，例如插入、删除或格式化文本。
* `data`（可选），包含要插入的字符的字符串。如果更改未插入文本（例如删除字符时），则其可能为空字符串。
* `dataTransfer`（可选），一个 `DataTransfer` 对象，其中包含有关添加到可编辑内容，或从可编辑内容中删除的富文本或纯文本数据的信息。
* `isComposing`（可选），一个布尔值，指示事件是组合会话的一部分，这意味着它在 `compositionstart` 事件之后，但在 `compositionend` 事件之前。默认值为 `false`。
* `ranges`（可选），一个静态 `Range` 数组，如果输入事件没有被取消，它将受到对 DOM 的更改的影响。

`InputEventInit` 字典也接受来自 `UIEventInit` 以及 `EventInit` 字典的值。

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参考
--

* `InputEvent`，它构造的对象所属的接口。
InputEvent.data
===============

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**备注：** 请注意，**`data`** 属性在使用键盘输入时会返回输入的字符内容，但在粘贴、拖动时可能会返回 `null`，这取决于浏览器。浏览器也可能把一些数据保存在 `InputEvent.dataTransfer`，而不是该 **`data`** 属性中。

`InputEvent` 接口中的只读属性 **`data`** 返回含有插入字符数据的 `DOMString`。如果更改未插入文本（例如删除字符时），则其可能为空字符串。

语法
--
```

var string = inputEvent.data;
```

### 返回值

一个 `DOMString`。

示例
--

在下面的简单示例中，我们在 input 事件上设置了一个事件监听器，以便在对 `<input>` 元素的内容进行任何更改时（通过键入或粘贴），通过 **`InputEvent.data`** 属性检索添加的文本，并在 `<input>` 下面的段落中报告。


```html
<p>Some text to copy and paste.</p>

<input type="text" />

<p class="result"></p>
```



```js
var editable = document.querySelector("input");
var result = document.querySelector(".result");

editable.addEventListener("input", (e) => {
  result.textContent = "Inputted text: " + e.data;
});
```

规范
--

| Specification |
| --- |
| Input Events Level 2 # dfn-data |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HashChangeEvent.oldURL
======================

**`oldURL`** 为 `HashChangeEvent` 接口的只读属性，其值为窗口导航改变前的 URL。

语法
--
```

let oldEventUrl = event.oldURL;
```

### 返回值

`DOMString`.

示例
--


```js
window.addEventListener("hashchange", function (event) {
  console.log("Hash changed from " + event.oldURL);
});
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-hashchangeevent-oldurl-dev |
HashChangeEvent.newURL
======================

**`newURL`** 为 `HashChangeEvent` 接口的只读属性，其值为窗口导航改变后的 URL。

语法
--
```

let newEventUrl = event.newURL;
```

### 返回值

`DOMString`.

示例
--


```js
window.addEventListener("hashchange", function (event) {
  console.log("Hash changed to " + event.newURL);
});
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-hashchangeevent-newurl-dev |
NamedNodeMap.getNamedItem()
===========================

`NamedNodeMap` 接口的 **`NamedNodeMap.getNamedItem()`** 方法返回对应给定名称的`属性`，如果没有对应名称的属性则返回 `null`

语法
--
```

myAttr = attrs.getNamedItem(name)
```

### 参数

* `name` 是期望获取的属性名
浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLCanvasElement.transferControlToOffscreen()
==============================================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
方法 **`HTMLCanvasElement.transferControlToOffscreen()`** 将控制转移到一个在主线程或者 web worker 的 `OffscreenCanvas` 对象上。

语法
--


```js
transferControlToOffscreen()
```

### 返回值

一个 `OffscreenCanvas` 对象。

样例
--


```js
var htmlCanvas = document.createElement("canvas");
var offscreen = htmlCanvas.transferControlToOffscreen();
var gl = offscreen.getContext("webgl");

// ... some drawing using the gl context ...

// Push frames back to the original HTMLCanvasElement
gl.commit();
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-canvas-transfercontroltooffscreen-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 定义此方法的接口 `HTMLCanvasElement`
* `OffscreenCanvas`
HTMLCanvasElement.getContext()
==============================

**`HTMLCanvasElement.getContext()`** 方法返回`canvas` 的上下文，如果上下文没有定义则返回 `null` .

在同一个 canvas 上以相同的 `contextType` 多次调用此方法只会返回同一个上下文。

语法
--
```

var ctx = canvas.getContext(contextType);
var ctx = canvas.getContext(contextType, contextAttributes);
```

### 参数

上下文类型（contextType）

是一个指示使用何种上下文的 `DOMString` 。可能的值是：

* `"2d`", 建立一个 `CanvasRenderingContext2D` 二维渲染上下文。
* `"webgl"` (或`"experimental-webgl"`) 这将创建一个 `WebGLRenderingContext` 三维渲染上下文对象。只在实现WebGL 版本 1(OpenGL ES 2.0) 的浏览器上可用。
* "`webgl2`" (或 "`experimental-webgl2`") 这将创建一个 `WebGL2RenderingContext` 三维渲染上下文对象。只在实现 WebGL 版本 2 (OpenGL ES 3.0) 的浏览器上可用。
实验性
* `"bitmaprenderer"` 这将创建一个只提供将 canvas 内容替换为指定`ImageBitmap`功能的`ImageBitmapRenderingContext` 。

**备注：** 标识符 "`experimental-webgl`" 或 "`experimental-webgl2`" 用于新 WebGL的实现。这些实现还没有达到测试套件一致性或图形驱动程序平台局势尚不稳定。Khronos Group 集团认证WebGL 实现在某些一致性规则。

`上下文属性 (contextAttributes)`

你可以在创建渲染上下文的时候设置多个属性，例如：


```js
canvas.getContext("webgl", { antialias: false, depth: false });
```


2d 上下文属性：

* **`alpha`**: `boolean`值表明`canvas`包含一个`alpha`通道。如果设置为`false`, 浏览器将认为`canvas`背景总是不透明的，这样可以加速绘制透明的内容和图片。
* 非标准
 (Gecko only) **`willReadFrequently`**: `boolean`值表明是否有重复读取计划。经常使用`getImageData()`，这将迫使软件使用 2D `canvas` 并 节省内存（而不是硬件加速）。这个方案适用于存在属性 `gfx.canvas.willReadFrequently`的环境。并设置为`true` (缺省情况下，只有 B2G / Firefox OS).
* 非标准
 (Blink only) **`storage`**: `string` 这样表示使用哪种方式存储 (默认为：持久（"persistent"）).

WebGL 上下文属性：

* **`alpha`**: `boolean`值表明`canvas`包含一个`alpha`缓冲区。
* **`antialias`**: `boolean`值表明是否开启抗锯齿。
* **`depth`**: `boolean`值表明绘制缓冲区包含一个深度至少为 16 位的缓冲区。
* **`failIfMajorPerformanceCaveat`**: 表明在一个系统性能低的环境是否创建该上下文的`boolean`值。
* **`powerPreference`**: 指示浏览器在运行 WebGL 上下文时使用相应的 GPU 电源配置。可能值如下：
    + `"default"`:自动选择，默认值。
    + `"high-performance"`: 高性能模式。
    + `"low-power"`: 节能模式。
* **`premultipliedAlpha`**: 表明排版引擎将假设绘制缓冲区包含预混合 alpha 通道的`boolean`值。
* **`preserveDrawingBuffer`**: 如果这个值为`true`缓冲区将不会被清除，会保存下来，直到被清除或被使用者覆盖。
* **`stencil`**: 表明绘制缓冲区包含一个深度至少为 8 位的模版缓冲区`boolean`值。

### 返回值

`RenderingContext` 返回值是下列之一：

* `CanvasRenderingContext2D` 为 `"2d"`,
* `WebGLRenderingContext` 为`"webgl"` 和`"experimental-webgl"`,
* `WebGL2RenderingContext` 为`"webgl2"` 和`"experimental-webgl2"`, 或者
* `ImageBitmapRenderingContext` 为`"bitmaprenderer"`.

如果 `contextType` 不是上述之一，返回`null`.

例子
--

定义 `<canvas>` 元素：


```html
<canvas id="canvas" width="300" height="300"></canvas>
```


通过如下代码可以获取 `canvas``2d` 上下文：


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
console.log(ctx); // CanvasRenderingContext2D { ... }
```


现在你已经获取到了 2D 画布的渲染上下文 (`CanvasRenderingContext2D`)，可以使用它画你想画的了。

规范
--

| Specification |
| --- |
| HTML Standard # dom-canvas-getcontext-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `HTMLCanvasElement`.
* `OffscreenCanvas.getContext()` (en-US)
* 可用的上下文：`CanvasRenderingContext2D`, `WebGLRenderingContext` 和 `WebGL2RenderingContext` and `ImageBitmapRenderingContext`.
HTMLCanvasElement.width
=======================

**`HTMLCanvasElement.width`** 属性是一个对应 `<canvas>` 元素 CSS 像素 `width` 的正整数。当这个属性没有指定时，或者被赋予一个不合法的值，比如一个负值，默认使用 300.

这是其中之一，另一个是 `HTMLCanvasElement.height`, 它们控制了 canvas 的大小尺寸。

语法
--
```

var pxl = canvas.width;
canvas.width = pxl;
```

示例
--

有这样一个 `<canvas>` 元素：


```html
<canvas id="canvas" width="300" height="300"></canvas>
```


你能够通过下面的代码得到 canvas 的宽度：


```js
var canvas = document.getElementById("canvas");
console.log(canvas.width); // 300
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-canvas-height |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

查看更多
----

* The interface defining it, `HTMLCanvasElement`.
* 另一个控制 canvas 大小的属性，`HTMLCanvasElement.height`.
HTMLCanvasElement: webglcontextlost event
=========================================

如果浏览器检测到与 `WebGLRenderingContext`对象关联的图形缓冲区已丢失，则会触发WebGL API 中的 **`webglcontextlost`** 事件。

|  |  |
| --- | --- |
| 冒泡 | Yes |
| 可取消 | Yes |
| 继承 | `WebGLContextEvent` |
| 事件处理程序属性 | none |

例子
--

在 `WEBGL_lose_context` 扩展的帮助下，你可以模拟 `webglcontextlost` 事件：


```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");

canvas.addEventListener("webglcontextlost", (event) => {
  console.log(event);
});

//WEBGL\_lose\_context 是 webgl 是属于 WebGLAPI 的一个扩展 API，它提供一组方法用来模拟一个 WebGLRenderingContext 上下文的丢失和恢复。
gl.getExtension("WEBGL\_lose\_context").loseContext();

// "webglcontextlost" event is logged.
```

规范
--

| Specification |
| --- |
| WebGL Specification # 5.15.2 |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

请参阅
---

* `WebGLContextEvent`
* `WebGLRenderingContext.isContextLost()`
* `WEBGL_lose_context`, `WEBGL_lose_context.loseContext()`, `WEBGL_lose_context.restoreContext()`
HTMLCanvasElement.captureStream()
=================================

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

该 **`HTMLCanvasElement.captureStream()`** 方法返回的 `CanvasCaptureMediaStream` 是一个实时视频捕获的画布。

语法
--
```

MediaStream = canvas.captureStream(frameRate);
```

### 参数

`frameRate` 可选

设置双精准度浮点值为每个帧的捕获速率。如果未设置，则每次画布更改时都会捕获一个新帧。如果设置为`0`，则会捕获单个帧。

### 返回值

对一个 `MediaStream` 对象的引用。

例子
--


```js
//获取所需要截取媒体流的 canvas element
var canvasElt = document.querySelector("canvas");

//截取到媒体流
var stream = canvasElt.captureStream(25); // 25 FPS

//使用媒体流
// E.g.使用 RTCPeerConnection 来传输给其他的电脑
// 下面的 pc 是其他地方创建的一个 RTCPeerConnection
pc.addStream(stream);
```

规范
--

| Specification |
| --- |
| Media Capture from DOM Elements # dom-htmlcanvaselement-capturestream |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

看看其他
----

* `CanvasCaptureMediaStream`,所属接口。
* `HTMLMediaElement.captureStream()` (en-US), 允许从一个媒体中获取流
* `MediaStream`
* `Media Capture and Streams API`
HTMLCanvasElement.mozOpaque
===========================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

非标准的 **`HTMLCanvasElement.mozOpaque`** 是一种 `Boolean` 的数据反映了 `<canvas>` 元素的 `moz-opaque` HTML 属性。它能够让画布（canvas）将半透明作为一个参考因素。如果画布知道没有半透明因素，作画的性能可以优化。

当使用 `HTMLCanvasElement.getContext()` 创建绘图上下文时，该 api 将被标准化为将 alpha 选项设置为 false。应该避免使用 mozOpaque。Firefox 将在未来停止支持它。

语法
--
```

var opaque = canvas.mozOpaque;
canvas.mozOpaque = true;
```

示例
--

有如下 `<canvas>` 元素：


```html
<canvas id="canvas" width="300" height="300" moz-opaque></canvas>
```


你可以获取或设置 `mozOpaque` 属性。例如，当 mimeType == 'image/jpeg'或类似值时，可以将其属性值设置为 true，以在不需要半透明度的情况下提高应用程序的性能。


```js
var canvas = document.getElementById("canvas");
console.log(canvas.mozOpaque); // true
// 停用该方法
canvas.mozOpaque = false;
```

规范
--

不属于任何标准。

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参考
--

* 定义它的接口，`HTMLCanvasElement`.
* `<canvas>` 元素的`moz-opaque`HTML 属性
* 为 Firefox OS 优化你的 JavaScript 游戏
HTMLCanvasElement.height
========================

**`HTMLCanvasElement.height`** 属性是一个正`整数` ，使用了`<canvas>` 元素的 HTML 属性`height`来反映该元素高度的 CSS 像素值。当该属性没有被定义，或被定义为一个无效值（如负值）时，将使用`150`作为它的默认值。

控制 canvas 元素大小的属性有两个，这是其中一个，还有一个是`HTMLCanvasElement.width`。

语法
--
```

var pxl = canvas.height;
canvas.height = pxl;
```

示例
--

给出这样一个`<canvas>` 元素：


```html
<canvas id="canvas" width="300" height="300"></canvas>
```


可以通过以下代码获得这个 canvas 元素的高度：


```js
var canvas = document.getElementById("canvas");
console.log(canvas.height); // 300
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-canvas-height |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

其他
--

* 定义的接口，`HTMLCanvasElement`.
* 另一个控制 canvas 大小的属性，`HTMLCanvasElement.width`.
HTMLCanvasElement.toDataURL()
=============================

**`HTMLCanvasElement.toDataURL()`** 方法返回一个包含图片展示的 data URI。可以使用 `type` 参数指定其类型，默认为 PNG 格式。图片的分辨率为 96dpi。

* 如果画布的高度或宽度是 0，那么会返回字符串“`data:,`”。
* 如果传入的类型非“`image/png`”，但是返回的值以“`data:image/png`”开头，那么该传入的类型是不支持的。
* Chrome 支持“`image/webp`”类型。
语法
--
```

canvas.toDataURL(type, encoderOptions);
```

### 参数

`type` 可选

图片格式，默认为 `image/png`

`encoderOptions` 可选

在指定图片格式为 `image/jpeg` 或 `image/webp` 的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 `0.92`。其他参数会被忽略。

### 返回值

包含 data URI 的字符串。

示例
--

有如下`<canvas>`元素


```html
<canvas id="canvas" width="5" height="5"></canvas>
```


可以用这样的方式获取一个 data-URL


```js
var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
```

### 设置 jpegs 图片的质量


```js
var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
var lowQuality = canvas.toDataURL("image/jpeg", 0.1);
```

### 示例：动态更改图片

可以使用鼠标事件来动态改变图片（这个例子中改变图片灰度）。

#### HTML


```html
<img class="grayscale" src="myPicture.png" alt="Description of my picture" />
```


#### JavaScript


```js
window.addEventListener("load", removeColors);

function showColorImg() {
  this.style.display = "none";
  this.nextSibling.style.display = "inline";
}

function showGrayImg() {
  this.previousSibling.style.display = "inline";
  this.style.display = "none";
}

function removeColors() {
  var aImages = document.getElementsByClassName("grayscale"),
    nImgsLen = aImages.length,
    oCanvas = document.createElement("canvas"),
    oCtx = oCanvas.getContext("2d");
  for (
    var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0;
    nImgId < nImgsLen;
    nImgId++
  ) {
    oColorImg = aImages[nImgId];
    nWidth = oColorImg.offsetWidth;
    nHeight = oColorImg.offsetHeight;
    oCanvas.width = nWidth;
    oCanvas.height = nHeight;
    oCtx.drawImage(oColorImg, 0, 0);
    oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
    aPix = oImgData.data;
    nPixLen = aPix.length;
    for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
      aPix[nPixel + 2] =
        aPix[nPixel + 1] =
        aPix[nPixel] =
          (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
    }
    oCtx.putImageData(oImgData, 0, 0);
    oGrayImg = new Image();
    oGrayImg.src = oCanvas.toDataURL();
    oGrayImg.onmouseover = showColorImg;
    oColorImg.onmouseout = showGrayImg;
    oCtx.clearRect(0, 0, nWidth, nHeight);
    oColorImg.style.display = "none";
    oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
  }
}
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-canvas-todataurl-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参考
--

* 定义接口，`HTMLCanvasElement`
* HTTP 参考中的 Data URI
TextDecoderStream.fatal
=======================

`TextDecoderStream` 接口的只读属性 **`fatal`** 是一个 `boolean`，表示 `TextDecoderStream` 对象的错误模式是否设置为 `fatal`。

两个可能的错误模式为 `fatal` 或者 `replacement`，默认是 `replacement`，它将一个替换字符 `U+FFFD`（�）推送到输出。

值
-

一个 `boolean`。如果错误模式设置为 `fatal`，返回 `true`。否则它返回 `false`。

示例
--


```js
stream = new TextDecoderStream();
console.log(stream.fatal); // returns false
```

规范
--

| Specification |
| --- |
| Encoding Standard # dom-textdecoder-fatal |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TextDecoderStream.writable
==========================

`TextDecoderStream` 接口的只读属性 **`writable`** 返回一个 `WritableStream`。

值
-

一个 `WritableStream`。

示例
--

从一个 `TextDecoderStream` 返回一个 `WritableStream`。


```js
stream = new TextDecoderStream();
console.log(stream.writeable); //a WritableStream
```

规范
--

| Specification |
| --- |
| Streams Standard # dom-generictransformstream-writable |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TextDecoderStream.readable
==========================

`TextDecoderStream` 接口的只读属性 **`readable`** 返回一个 `ReadableStream`。

值
-

一个 `ReadableStream`。

示例
--

这个示例展示了如何从一个 `TextDecoderStream` 返回一个 `ReadableStream`。


```js
stream = new TextDecoderStream();
console.log(stream.readable); //a ReadableStream
```

规范
--

| Specification |
| --- |
| Streams Standard # dom-generictransformstream-readable |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TextDecoderStream()
===================

**`TextDecoderStream()`** 构造函数创建一个新的 `TextDecoderStream` 对象，该对象用于将二进制编码的文本流转换为字符串。

语法
--


```js
new TextDecoderStream(label)
new TextDecoderStream(label, options)
```

### 参数

`label`

默认为 `utf-8` 的字符串。可以是任意有效的编码。

`options` 可选

一个具有属性的 `TextDecoderOptions` 对象：

`fatal`

一个布尔值，表示错误的模式。如果是 true，则在 decoder 遇到错误时抛出一个 `DOMException`。默认值是 `false`。


示例
--

以下示例演示如何从一个 `fetch()` 中获取并解码二进制数据。如果没有传递任何 `label`，数据的解码类型为 UTF-8。


```js
const response = await fetch("https://example.com");
const stream = response.body.pipeThrough(new TextDecoderStream());
```

规范
--

| Specification |
| --- |
| Encoding Standard # ref-for-dom-textdecoderstream① |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TextDecoderStream.ignoreBOM
===========================

`TextDecoderStream` 接口的只读属性 **`ignoreBOM`** 返回一个 `boolean`，表示是否忽略字节顺序标记（BOM）。

值
-

一个 `boolean`，初始值是 `false`。

示例
--


```js
stream = new TextDecoderStream();
console.log(stream.ignoreBOM); // returns false
```

规范
--

| Specification |
| --- |
| Encoding Standard # textdecoder-ignore-bom-flag |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TextDecoderStream.encoding
==========================

`TextDecoderStream` 接口的只读属性 **`encoding`** 返回一个字符串，其中包含指定的 encoder 使用的编码算法的名称。

值
-

一个小写的 ASCII 字符串。

示例
--

从一个 `TextDecoderStream` 返回 `encoding` 的值。


```js
stream = new TextDecoderStream();
console.log(stream.encoding); // returns the default "utf-8"
```

规范
--

| Specification |
| --- |
| Encoding Standard # dom-textdecoder-encoding |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaStreamAudioSourceNode.MediaStreamAudioSourceNode()
=======================================================

\*\*`MediaStreamAudioSourceNode()`\*\*构造器创建一个新的 `MediaStreamAudioSourceNode`对象实例。

语法
--


```js
var myAudioSource = new MediaStreamAudioSourceNode(context, options);
```

### 参数

*context*

一个用来使用 node 的音频环境`AudioContext`。

*options*

`MediaStreamAudioSourceOptions`，一个 map 对象，定义`MediaStreamAudioSourceNode`的属性：

* `mediaStream`: 需要使用的音频流

示例
--


```js
// define variables
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// getUserMedia block - grab stream 获取音频流
// put it into a 把音频流放入 MediaStreamAudioSourceNode
if (navigator.mediaDevices.getUserMedia) {
  console.log("new getUserMedia supported.");
  navigator.mediaDevices
    .getUserMedia(
      // constraints: audio and video for this app
      {
        audio: true,
        video: false,
      },
    )
    .then(function (stream) {
      // Create a MediaStreamAudioSourceNode
      var options = {
        mediaStream: stream,
      };

      var source = new MediaStreamAudioSourceNode(audioCtx, options);
      source.connect(audioCtx.destination);
    })
    .catch(function (err) {
      console.log("The following gUM error occured: " + err);
    });
} else {
  console.log("new getUserMedia not supported on your browser!");
}
```

规范
--

| Specification |
| --- |
| Web Audio API # dom-mediastreamaudiosourcenode-mediastreamaudiosourcenode |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
FileSystemSyncAccessHandle：close() 方法
=====================================

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

`FileSystemSyncAccessHandle` 接口的 **`close()`** 方法用于关闭一个打开的同步文件句柄，禁止之后对其的任何操作并且释放之前加在与文件句柄相关联的文件上的独占锁。

**备注：** 在规范早期版本中，`close()`、`flush()`、`getSize()` 和 `truncate()` 被错误地规定为异步方法。某些浏览器的旧版本是依照异步方式来实现这些方法的，不过，现今所有支持这些方法的浏览器都将它们实现为同步方法。

语法
--


```js
close()
```

### 参数

无。

### 返回值

无（`undefined`）。

### 异常

无。

示例
--

下面的异步事件处理函数包含在一个 Web Worker 中。当收到来自主线程的消息时，它将执行：

* 创建一个同步文件访问句柄。
* 获取文件的大小然后创建一个 `ArrayBuffer` 来容纳其内容。
* 将文件内容读取到缓冲区。
* 将收到的消息编码然后写入到文件的末尾。
* 将更改保存到磁盘然后关闭访问句柄。


```js
onmessage = async (e) => {
  // 接收从主线程发来的消息
  const message = e.data;

  // 获取草稿文件的句柄
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // 获取同步访问句柄
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // 获取文件的大小
  const fileSize = accessHandle.getSize();
  // 读取文件内容到缓冲区
  const buffer = new DataView(new ArrayBuffer(fileSize));
  const readBuffer = accessHandle.read(buffer, { at: 0 });

  // 将消息写入文件末尾
  const encoder = new TextEncoder();
  const encodedMessage = encoder.encode(message);
  const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });

  // 将更改持久化至磁盘
  accessHandle.flush();

  // 用完 FileSystemSyncAccessHandle 后记得把它关闭
  accessHandle.close();
};
```

规范
--

| Specification |
| --- |
| File System Standard # api-filesystemsyncaccesshandle-close |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 文件系统 API
* 文件系统访问 API：简化本地文件访问