1# ImageData 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @sd-wu--> 5<!--Designer: @sunbees--> 6<!--Tester: @liuli0427--> 7<!--Adviser: @HelloCrease--> 8 9ImageData对象可以存储canvas渲染的像素数据。 10 11> **说明：** 12> 13> 从 API version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15## constructor 16 17constructor(width: number, height: number, data?: Uint8ClampedArray) 18 19创建ImageData时，宽高不超过16384px，最大面积不超过16000px*16000px，超过最大面积则无法正常绘制。当创建面积超过536870911px时，返回值的width和height均为0px，data为undefined。 20 21**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 22 23**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 24 25**系统能力：** SystemCapability.ArkUI.ArkUI.Full 26 27**参数：** 28| 参数名 | 类型 | 必填 | 说明 | 29| ------ | ----- | ----- | ----- | 30| width | number |是| 矩形区域宽度，默认单位为vp。 | 31| height | number |是| 矩形区域高度，默认单位为vp。| 32| data | [Uint8ClampedArray](../../apis-arkts/arkts-apis-arkts-collections-Uint8ClampedArray.md) |否| 一维数组，保存了相应的颜色数据，数据值范围为0到255。<br/>默认值：值全为0的一维数组 | 33 34## constructor<sup>12+<sup> 35 36constructor(width: number, height: number, data?: Uint8ClampedArray, unit?: LengthMetricsUnit) 37 38创建ImageData时，宽高不超过16384px，最大面积不超过16000px*16000px，超过最大面积则无法正常绘制。当创建面积超过536870911px时，返回值的width和height均为0px，data为undefined。 39 40**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 41 42**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 43 44**系统能力：** SystemCapability.ArkUI.ArkUI.Full 45 46**参数：** 47 48| 参数名 | 类型 | 必填 | 说明 | 49| ------ | ----- | ----- | ----- | 50| width | number |是| 矩形区域宽度，默认单位为vp。 | 51| height | number |是| 矩形区域高度，默认单位为vp。| 52| data | [Uint8ClampedArray](../../apis-arkts/arkts-apis-arkts-collections-Uint8ClampedArray.md) |否| 一维数组，保存了相应的颜色数据，数据值范围为0到255。<br/>默认值：值全为0的一维数组 | 53| unit | [LengthMetricsUnit](../js-apis-arkui-graphics.md#lengthmetricsunit12) | 否 | 用来配置ImageData对象的单位模式，配置后无法动态更改，配置方法同[CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)。<br>默认值：DEFAULT | 54 55## 属性 56 57**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 58 59**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 60 61**系统能力：** SystemCapability.ArkUI.ArkUI.Full 62 63| 名称 | 类型 | 只读 | 可选 | 说明 | 64| ------ | -------- | --------- | ---------- | ------------------------------ | 65| width | number | 是 | 否 | 矩形区域实际像素宽度。<br>单位为px。 | 66| height | number | 是 | 否 | 矩形区域实际像素高度。<br>单位为px。 | 67| data | [Uint8ClampedArray](../../apis-arkts/arkts-apis-arkts-collections-Uint8ClampedArray.md) | 是 | 否 | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 | 68 69> **说明：** 70> 71> 可使用[px2vp](ts-pixel-units.md#像素单位转换)接口进行单位转换。 72 73## 示例 74 75使用getImageData接口获得一个ImageData对象。 76 77 ```ts 78 // xxx.ets 79 @Entry 80 @Component 81 struct Translate { 82 private settings: RenderingContextSettings = new RenderingContextSettings(true); 83 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 84 // "common/images/1234.png"需要替换为开发者所需的图像资源文件 85 private img: ImageBitmap = new ImageBitmap("common/images/1234.png"); 86 87 build() { 88 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 89 Canvas(this.context) 90 .width('100%') 91 .height('100%') 92 .backgroundColor('#ffff00') 93 .onReady(() => { 94 this.context.drawImage(this.img, 0, 0, 130, 130) 95 let imageData = this.context.getImageData(50, 50, 130, 130) 96 this.context.putImageData(imageData, 150, 150) 97 }) 98 } 99 .width('100%') 100 .height('100%') 101 } 102 } 103 ``` 104 105  106 107
