ts-components-canvas-imagebitmap.md 2.1 KB
Newer Older
Z
zengyawen 已提交
1
# ImageBitmap
Z
zengyawen 已提交
2

E
esterzhou 已提交
3
An **ImageBitmap** object stores pixel data rendered on a canvas.
Z
zengyawen 已提交
4

E
ester.zhou 已提交
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
>  **NOTE**
>
>  The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

## APIs

ImageBitmap(src: string)

Since API version 9, this API is supported in ArkTS widgets.

**Parameters**

| Name| Type| Mandatory| Default Value| Description                                                    |
| ------ | -------- | ---- | ------ | ------------------------------------------------------------ |
| src    | string   | Yes  | -      | Image source.<br>**NOTE**<br>ArkTS widgets do not support the **http://**, **datashare://**, or **file://data/storage** path prefixes.|
Z
zengyawen 已提交
20 21 22



Z
zengyawen 已提交
23
## Attributes
Z
zengyawen 已提交
24

E
ester.zhou 已提交
25
| Name| Type| Description|
Z
zengyawen 已提交
26
| -------- | -------- | -------- |
E
ester.zhou 已提交
27 28
| width | number | Pixel width of the **ImageBitmap** object. The current value is **0**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| height | number | Pixel height of the **ImageBitmap** object. The current value is **0**.<br>Since API version 9, this API is supported in ArkTS widgets.|
E
esterzhou 已提交
29 30 31 32 33 34 35 36

**Example**

  ```ts
  // xxx.ets
  @Entry
  @Component
  struct ImageExample {
E
ester.zhou 已提交
37 38 39
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
    private img:ImageBitmap = new ImageBitmap("common/images/example.jpg")
E
esterzhou 已提交
40 41 42 43 44 45 46 47

    build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
E
ester.zhou 已提交
48
            this.context.drawImage( this.img,0,0,500,500,0,0,400,200)
E
esterzhou 已提交
49 50 51 52 53 54 55 56 57 58
        })
      }
      .width('100%')
      .height('100%')
    }
  }
  ```

  ![en-us_image_0000001194352442](figures/en-us_image_0000001194352442.png)

E
ester.zhou 已提交
59 60 61 62 63 64 65 66 67


## Methods


### close

close()

E
ester.zhou 已提交
68
Releases all graphics resources associated with this **ImageBitmap** object and sets its width and height to **0**.
E
ester.zhou 已提交
69 70

Since API version 9, this API is supported in ArkTS widgets.