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