1# ImageData
2
3An **ImageData** object stores pixel data rendered on a canvas.
4
5>  **NOTE**
6>
7>  The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
8
9## APIs
10
11constructor(width: number, height: number, data?: Uint8ClampedArray, unit?: LengthMetricsUnit);
12
13A constructor used to create an **ImageData** object. To ensure successful drawing, make sure the object's area does not exceed 16000 x 16000, with its width and height not greater than 16384 px. If the created area exceeds 536870911 px, the returned width and height are both 0 px, and **data** is **undefined**.
14
15**Widget capability**: This API can be used in ArkTS widgets since API version 9.
16
17**Atomic service API**: This API can be used in atomic services since API version 11.
18
19**System capability**: SystemCapability.ArkUI.ArkUI.Full
20
21**Parameters**
22| Name| Type | Mandatory | Description|
23| ------ | ----- | ----- | ----- |
24| width | number |Yes| Width of the rectangle.<br>Default unit: vp|
25| height | number |Yes| Height of the rectangle.<br>Default unit: vp|
26| data | Uint8ClampedArray |No| A one-dimensional array of color values. The values range from 0 to 255.|
27| unit<sup>12+</sup>  | [LengthMetricsUnit](../js-apis-arkui-graphics.md#lengthmetricsunit12) | No  |  Unit mode of the **ImageData** object. The value cannot be dynamically changed once set. The configuration method is the same as that of [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md#lengthmetricsunit12).<br>Default value: **DEFAULT**|
28
29## Attributes
30
31**Widget capability**: This API can be used in ArkTS widgets since API version 9.
32
33**Atomic service API**: This API can be used in atomic services since API version 11.
34
35**System capability**: SystemCapability.ArkUI.ArkUI.Full
36
37| Name    | Type  | Read Only| Optional| Description|
38| ------ | -------- | --------- | ---------- | ------------------------------ |
39| width | number | Yes| No| Actual width of the rectangle on the canvas.<br>The unit is px.|
40| height | number | Yes| No| Actual height of the rectangle on the canvas.<br>The unit is px.|
41| data | Uint8ClampedArray | Yes| No| A one-dimensional array of color values. The values range from 0 to 255.|
42
43>  **NOTE**
44>
45>  You can use the [px2vp](ts-pixel-units.md#pixel-unit-conversion) API to convert the unit.
46
47**Example**
48
49This example shows how to use the **getImageData** API to obtain an **ImageData** object.
50
51  ```ts
52  // xxx.ets
53  @Entry
54  @Component
55  struct Translate {
56    private settings: RenderingContextSettings = new RenderingContextSettings(true)
57    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
58    private img:ImageBitmap = new ImageBitmap("common/images/1234.png")
59
60    build() {
61      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
62        Canvas(this.context)
63          .width('100%')
64          .height('100%')
65          .backgroundColor('#ffff00')
66          .onReady(() =>{
67            this.context.drawImage(this.img,0,0,130,130)
68            let imagedata = this.context.getImageData(50,50,130,130)
69            this.context.putImageData(imagedata,150,150)
70          })
71      }
72      .width('100%')
73      .height('100%')
74    }
75  }
76  ```
77
78  ![en-us_image_000000127777780](figures/en-us_image_000000127777780.png)
79