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 13**Widget capability**: This API can be used in ArkTS widgets since API version 9. 14 15**Atomic service API**: This API can be used in atomic services since API version 11. 16 17**System capability**: SystemCapability.ArkUI.ArkUI.Full 18 19**Parameters** 20| Name | Type | Mandatory | Description | 21| ------ | ----- | ----- | ----- | 22| width | number |Yes| Actual width of the rectangle on the canvas. The default unit is vp. | 23| height | number |Yes| Actual height of the rectangle on the canvas. The default unit is vp.| 24| data | Uint8ClampedArray |No| A one-dimensional array of color values. The values range from 0 to 255. | 25| 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** | 26 27## Attributes 28 29**Widget capability**: This API can be used in ArkTS widgets since API version 9. 30 31**Atomic service API**: This API can be used in atomic services since API version 11. 32 33**System capability**: SystemCapability.ArkUI.ArkUI.Full 34 35| Name | Type | Read-Only | Optional | Description | 36| ------ | -------- | --------- | ---------- | ------------------------------ | 37| width | number | Yes | No | Actual width of the rectangle on the canvas.<br>The unit is px. | 38| height | number | Yes | No | Actual height of the rectangle on the canvas.<br>The unit is px. | 39| data | Uint8ClampedArray | Yes | No | A one-dimensional array of color values. The values range from 0 to 255. | 40 41> **NOTE** 42> 43> You can use the [px2vp](ts-pixel-units.md#pixel-unit-conversion) API to convert the unit. 44 45**Example** 46 47 ```ts 48 // xxx.ets 49 @Entry 50 @Component 51 struct Translate { 52 private settings: RenderingContextSettings = new RenderingContextSettings(true) 53 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 54 private img:ImageBitmap = new ImageBitmap("common/images/1234.png") 55 56 build() { 57 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 58 Canvas(this.context) 59 .width('100%') 60 .height('100%') 61 .backgroundColor('#ffff00') 62 .onReady(() =>{ 63 this.context.drawImage(this.img,0,0,130,130) 64 let imagedata = this.context.getImageData(50,50,130,130) 65 this.context.putImageData(imagedata,150,150) 66 }) 67 } 68 .width('100%') 69 .height('100%') 70 } 71 } 72 ``` 73 74  75
