1# ImageBitmap 2 3ImageBitmap对象可以存储canvas渲染的像素数据。 4 5> **说明：** 6> 7> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 接口 10 11### ImageBitmap<sup>12+</sup> 12 13ImageBitmap(data: PixelMap, unit?: LengthMetricsUnit) 14 15通过PixelMap创建ImageBitmap对象。 16 17**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 18 19**系统能力：** SystemCapability.ArkUI.ArkUI.Full 20 21**参数：** 22 23| 参数名 | 类型 | 必填 | 说明 | 24| ---- | ------ | ---- | ---------------------------------------- | 25| data | [PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | 是 | 图片的数据源支持PixelMap对象。 | 26| unit | [LengthMetricsUnit](ts-canvasrenderingcontext2d.md#lengthmetricsunit12) | 否 | 用来配置ImageBitmap对象的单位模式，配置后无法动态更改，配置方法同[CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md#lengthmetricsunit12)。<br>默认值：DEFAULT。 | 27 28### ImageBitmap 29 30ImageBitmap(src: string, unit?: LengthMetricsUnit) 31 32通过ImageSrc创建ImageBitmap对象。 33 34**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 35 36**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 37 38**系统能力：** SystemCapability.ArkUI.ArkUI.Full 39 40**参数：** 41 42| 参数名 | 类型 | 必填 | 说明 | 43| ---- | ------ | ---- | ---------------------------------------- | 44| src | string | 是 | 图片的数据源支持本地图片。<br>1、string格式用于加载本地图片，例如ImageBitmap("common/images/example.jpg")，type为"entry"和"feature"类型的Module，其图片加载路径的起点为当前Module的ets文件夹，type为"har"和"shared"类型的Module，其图片加载路径的起点为当前构建的"entry"或"feature"类型Module的ets文件夹。<br/>type为"har"和"shared"类型的Module中推荐使用[ImageSource](../../../media/image/image-decoding.md)图片解码方式将资源图片解码为统一的PixelMap加载使用。<br/>2、支持本地图片类型：bmp、jpg、png、svg和webp类型。<br/>**说明：**<br/>- ArkTS卡片上不支持`http://`等网络相关路径前缀、`datashare://`路径前缀以及`file://data/storage`路径前缀的字符串。 | 45| unit<sup>12+</sup> | [LengthMetricsUnit](../js-apis-arkui-graphics.md#lengthmetricsunit12) | 否 | 用来配置ImageBitmap对象的单位模式，配置后无法动态更改，配置方法同[CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md#lengthmetricsunit12)。<br>默认值：DEFAULT。 | 46 47 48## 属性 49 50**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 51 52**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 53 54**系统能力：** SystemCapability.ArkUI.ArkUI.Full 55 56| 名称 | 类型 | 只读 | 可选 | 描述 | 57| ------ | ------ | ----- | -------- | --------------------------- | 58| width | number | 是 | 否 | ImageBitmap的像素宽度。<br>默认单位为vp。 | 59| height | number | 是 | 否 | ImageBitmap的像素高度。<br>默认单位为vp。 | 60 61## close 62 63close(): void 64 65释放ImageBitmap对象相关联的所有图形资源，并将ImageBitmap对象的宽高置为0。close示例代码同创建ImageBitmap代码。 66 67**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 68 69**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 70 71**系统能力：** SystemCapability.ArkUI.ArkUI.Full 72 73## ImageBitmap支持并发线程绘制 74 75从API version 11开始，当应用创建[Worker线程](../../../arkts-utils/worker-introduction.md)，支持使用postMessage将ImageBitmap实例传到Worker中进行绘制，并使用onmessage接收Worker线程发送的绘制结果进行显示。 76 77## 示例 78 79### 示例1 80 81 ```ts 82 // xxx.ets 83 @Entry 84 @Component 85 struct ImageExample { 86 private settings: RenderingContextSettings = new RenderingContextSettings(true) 87 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 88 private img:ImageBitmap = new ImageBitmap("common/images/example.jpg") 89 90 build() { 91 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 92 Canvas(this.context) 93 .width('100%') 94 .height('100%') 95 .backgroundColor('#ffff00') 96 .onReady(() => { 97 this.context.drawImage(this.img, 0, 0, 500, 500, 0, 0, 400, 200) 98 this.img.close() 99 }) 100 } 101 .width('100%') 102 .height('100%') 103 } 104 } 105 ``` 106 107  108 109### 示例2 110 111 ```ts 112// xxx.ets 113@Entry 114@Component 115struct Demo { 116 private settings: RenderingContextSettings = new RenderingContextSettings(true) 117 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 118 119 build() { 120 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 121 Canvas(this.context) 122 .width('100%') 123 .height('50%') 124 .backgroundColor('#ffff00') 125 .onReady(() => { 126 this.context.fillStyle = "#00ff00" 127 this.context.fillRect(0, 0, 100, 100) 128 let pixel = this.context.getPixelMap(0, 0, 100, 100) 129 let image = new ImageBitmap(pixel) 130 this.context.drawImage(image, 100, 100) 131 }) 132 133 } 134 .width('100%') 135 .height('100%') 136 } 137} 138 ``` 139 140  141 142 143### 示例3 144```ts 145import worker from '@ohos.worker'; 146 147@Entry 148@Component 149struct imageBitmapExamplePage { 150 private settings: RenderingContextSettings = new RenderingContextSettings(true); 151 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 152 private myWorker = new worker.ThreadWorker('entry/ets/workers/Worker.ts'); 153 private img:ImageBitmap = new ImageBitmap("common/images/example.jpg") 154 155 build() { 156 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 157 Canvas(this.context) 158 .width('100%') 159 .height('100%') 160 .backgroundColor('#ffff00') 161 .onReady(() => { 162 this.myWorker.postMessage({ myImage: this.img }); 163 this.myWorker.onmessage = (e): void => { 164 if (e.data.myImage) { 165 let image: ImageBitmap = e.data.myImage 166 this.context.transferFromImageBitmap(image) 167 } 168 } 169 }) 170 } 171 .width('100%') 172 .height('100%') 173 } 174} 175``` 176Worker线程在onmessage中接收到主线程postMessage发送的ImageBitmap，并进行绘制。 177 178```ts 179workerPort.onmessage = function (e: MessageEvents) { 180 if (e.data.myImage) { 181 let img = e.data.myImage 182 let offCanvas = new OffscreenCanvas(600, 600) 183 let offContext = offCanvas.getContext("2d") 184 offContext.drawImage(img, 0, 0, 500, 500, 0, 0, 400, 200) 185 let image = offCanvas.transferToImageBitmap() 186 workerPort.postMessage({ myImage: image }); 187 } 188} 189``` 190 191 
