• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# OffscreenCanvas
2
3>  **NOTE**
4>
5>  The APIs of this component are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
6
7
8**OffscreenCanvas** defines a canvas object that can be rendered off the screen.
9
10
11## Attributes
12
13| Name    | Type    | Description                         |
14| ------ | ------ | --------------------------- |
15| width  | number | Width of the **OffscreenCanvas** object.|
16| height | number | Height of the **OffscreenCanvas** object.|
17
18
19## Methods
20
21
22### getContext
23
24getContext(type: string, options?: CanvasRenderingContext2DSettings): OffscreenCanvasRenderingContext2D
25
26Obtains the **OffscreenCanvas** context. This API returns a 2D drawing object.
27
28**Parameters**
29
30| Name      | Type                                    | Mandatory  | Description                    |
31| --------- | ---------------------------------------- | ---- | ---------------------- |
32| contextId | string                                   | Yes   | Context ID. The value can only be **"2d"**.        |
33| options   | [CanvasRenderingContext2DSettings](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | No   | 2D drawing object, which can be used to draw rectangles, images, and texts, on the **OffscreenCanvas**. |
34
35**Return value**
36
37| Type                                      | Description                         |
38| ---------------------------------------- | --------------------------- |
39| [OffscreenCanvasRenderingContext2D](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | 2D drawing object, which can be used to draw rectangles, images, and texts, on the **OffscreenCanvas**. |
40
41
42### toDataURL
43
44toDataURL(type?: string, quality?:number):
45
46Generates a URL containing image display information.
47
48**Parameters**
49
50| Name    | Type  | Mandatory  | Description                                      |
51| ------- | ------ | ---- | ---------------------------------------- |
52| type    | string | No   | Image format. The default value is **image/png**.           |
53| 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.|
54
55**Return value**
56
57| Type    | Description       |
58| ------ | --------- |
59| string | Image URL.|
60
61
62### transferToImageBitmap
63
64transferToImageBitmap(): ImageBitmap
65
66Creates an **ImageBitmap** object on the most recently rendered image of the **OffscreenCanvas**.
67
68**Return value**
69
70| Type                                      | Description             |
71| ---------------------------------------- | --------------- |
72| [ImageBitmap](../arkui-js/js-components-canvas-imagebitmap.md) | Pixel data rendered on the **OffscreenCanvas**.|
73
74
75## Example
76
77```html
78<!-- xxx.hml -->
79<div>
80  <canvas ref="canvasId" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
81</div>
82```
83
84```js
85//xxx.js
86export default {
87  onShow() {
88    var canvas = this.$refs.canvasId.getContext('2d');
89    var offscreen = new OffscreenCanvas(500,500);
90    var offscreenCanvasCtx = offscreen.getContext("2d");
91
92    // ... some drawing for the canvas using the offscreenCanvasCtx ...
93
94    var dataURL = offscreen.toDataURL();
95    console.log(dataURL); //data:image/png;base64,xxxxxx
96
97    var bitmap = offscreen.transferToImageBitmap();
98    canvas.transferFromImageBitmap(bitmap);
99  }
100}
101```
102