“a144ea4b7a13087081ab5402fa9ad0bcfd249e67”上不存在“README.md”
js-components-canvas-offscreencanvas.md 3.3 KB
Newer Older
E
ester.zhou 已提交
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
# OffscreenCanvas

>  **NOTE**
>
>  The APIs of this component are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.


**OffscreenCanvas** defines a canvas object that can be rendered off the screen.


## Attributes

| Name    | Type    | Description                         |
| ------ | ------ | --------------------------- |
| width  | number | Width of the **OffscreenCanvas** object.|
| height | number | Height of the **OffscreenCanvas** object.|


## Methods


### getContext

getContext(type: string, options?: CanvasRenderingContext2DSettings): OffscreenCanvasRenderingContext2D

Obtains the **OffscreenCanvas** context. This API returns a 2D drawing object.

**Parameters**

| Name      | Type                                    | Mandatory  | Description                    |
| --------- | ---------------------------------------- | ---- | ---------------------- |
| contextId | string                                   | Yes   | Context ID. The value can only be **"2d"**.        |
| options   | [CanvasRenderingContext2DSettings](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | No   | 2D drawing object, which can be used to draw rectangles, images, and texts, on the **OffscreenCanvas**. |

**Return value** 

| Type                                      | Description                         |
| ---------------------------------------- | --------------------------- |
| [OffscreenCanvasRenderingContext2D](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | 2D drawing object, which can be used to draw rectangles, images, and texts, on the **OffscreenCanvas**. |


### toDataURL

toDataURL(type?: string, quality?:number):
Z
zengyawen 已提交
45 46 47

Generates a URL containing image display information.

E
ester.zhou 已提交
48
**Parameters**
Z
zengyawen 已提交
49

E
ester.zhou 已提交
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
| Name    | Type  | Mandatory  | Description                                      |
| ------- | ------ | ---- | ---------------------------------------- |
| type    | string | No   | Image format. The default value is **image/png**.           |
| quality | number | No   | Image quality, which ranges from 0 to 1, when the image format is **image/jpeg** or **image/webp**. If the set value is beyond the value range, the default value **0.92** is used.|

**Return value** 

| Type    | Description       |
| ------ | --------- |
| string | Image URL.|


### transferToImageBitmap

transferToImageBitmap(): ImageBitmap

Creates an **ImageBitmap** object on the most recently rendered image of the **OffscreenCanvas**.

**Return value** 

| Type                                      | Description             |
| ---------------------------------------- | --------------- |
| [ImageBitmap](../arkui-js/js-components-canvas-imagebitmap.md) | Pixel data rendered on the **OffscreenCanvas**.|


## Example

```html
Z
zengyawen 已提交
78 79 80 81 82 83
<!-- xxx.hml -->
<div>
  <canvas ref="canvasId" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```

E
ester.zhou 已提交
84
```js
Z
zengyawen 已提交
85 86 87 88 89 90
//xxx.js
export default {
  onShow() {
    var canvas = this.$refs.canvasId.getContext('2d');
    var offscreen = new OffscreenCanvas(500,500);
    var offscreenCanvasCtx = offscreen.getContext("2d");
Z
zengyawen 已提交
91

Z
zengyawen 已提交
92
    // ... some drawing for the canvas using the offscreenCanvasCtx ...
Z
zengyawen 已提交
93

Z
zengyawen 已提交
94 95
    var dataURL = offscreen.toDataURL();
    console.log(dataURL); //data:image/png;base64,xxxxxx
Z
zengyawen 已提交
96

Z
zengyawen 已提交
97 98 99 100
    var bitmap = offscreen.transferToImageBitmap();
    canvas.transferFromImageBitmap(bitmap);
  }
}
Z
zengyawen 已提交
101
```
新手
引导
客服 返回
顶部