“96e2844999f99878fc5b03b81ccaa60580005b81”上不存在“arch/powerpc/mm/hash_native_64.c”
ts-components-canvas-imagedata.md 1.4 KB
Newer Older
Z
zengyawen 已提交
1
# ImageData对象
Z
zengyawen 已提交
2

L
lanyill 已提交
3 4
ImageData对象可以存储canvas渲染的像素数据。

H
geshi  
HelloCrease 已提交
5
>  **说明:**
L
lanyill 已提交
6
> 
Z
zengyawen 已提交
7
> 从 API Version 8 开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
Z
zengyawen 已提交
8 9 10



Z
zengyawen 已提交
11 12 13 14 15 16
## 属性

| 属性 | 类型 | 描述 | 
| -------- | -------- | -------- |
| width | number | 矩形区域实际像素宽度。 | 
| height | number | 矩形区域实际像素高度。 | 
L
lanyill 已提交
17 18
| data | Uint8ClampedArray | 一维数组,保存了相应的颜色数据,数据值范围为0到255。 | 

L
lanyill 已提交
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 45 46 47 48 49
**示例:**

  ```ts
  // xxx.ets
@Entry
@Component
struct Translate {
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.context.drawImage(this.img,0,0,130,130);
          var imagedata = this.context.getImageData(50,50,130,130);
          this.context.putImageData(imagedata,150,150);
        })
    }
    .width('100%')
    .height('100%')
  }
}
  ```

  ![zh-cn_image_000000127777780](figures/zh-cn_image_000000127777780.png)