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通过ImageBitMap加载本地图片。 82 83 ```ts 84 // xxx.ets 85 @Entry 86 @Component 87 struct ImageExample { 88 private settings: RenderingContextSettings = new RenderingContextSettings(true) 89 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 90 private img:ImageBitmap = new ImageBitmap("common/images/example.jpg") 91 92 build() { 93 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 94 Canvas(this.context) 95 .width('100%') 96 .height('100%') 97 .backgroundColor('#ffff00') 98 .onReady(() => { 99 this.context.drawImage(this.img, 0, 0, 500, 500, 0, 0, 400, 200) 100 this.img.close() 101 }) 102 } 103 .width('100%') 104 .height('100%') 105 } 106 } 107 ``` 108 109  110 111### 示例2（创建ImageBitmap） 112 113通过PixelMap创建ImageBitmap对象。 114 115 ```ts 116// xxx.ets 117@Entry 118@Component 119struct Demo { 120 private settings: RenderingContextSettings = new RenderingContextSettings(true) 121 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 122 123 build() { 124 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 125 Canvas(this.context) 126 .width('100%') 127 .height('50%') 128 .backgroundColor('#ffff00') 129 .onReady(() => { 130 this.context.fillStyle = "#00ff00" 131 this.context.fillRect(0, 0, 100, 100) 132 let pixel = this.context.getPixelMap(0, 0, 100, 100) 133 let image = new ImageBitmap(pixel) 134 this.context.drawImage(image, 100, 100) 135 }) 136 137 } 138 .width('100%') 139 .height('100%') 140 } 141} 142 ``` 143 144  145 146 147### 示例3（支持并发线程绘制） 148 149通过创建Worker线程，实现并发线程绘制。 150 151```ts 152import { worker } from '@kit.ArkTS'; 153 154@Entry 155@Component 156struct imageBitmapExamplePage { 157 private settings: RenderingContextSettings = new RenderingContextSettings(true); 158 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 159 private myWorker = new worker.ThreadWorker('entry/ets/workers/Worker.ts'); 160 private img:ImageBitmap = new ImageBitmap("common/images/example.jpg") 161 162 build() { 163 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 164 Canvas(this.context) 165 .width('100%') 166 .height('100%') 167 .backgroundColor('#ffff00') 168 .onReady(() => { 169 this.myWorker.postMessage({ myImage: this.img }); 170 this.myWorker.onmessage = (e): void => { 171 if (e.data.myImage) { 172 let image: ImageBitmap = e.data.myImage 173 this.context.transferFromImageBitmap(image) 174 } 175 } 176 }) 177 } 178 .width('100%') 179 .height('100%') 180 } 181} 182``` 183Worker线程在onmessage中接收到主线程postMessage发送的ImageBitmap，并进行绘制。 184 185```ts 186workerPort.onmessage = function (e: MessageEvents) { 187 if (e.data.myImage) { 188 let img = e.data.myImage 189 let offCanvas = new OffscreenCanvas(600, 600) 190 let offContext = offCanvas.getContext("2d") 191 offContext.drawImage(img, 0, 0, 500, 500, 0, 0, 400, 200) 192 let image = offCanvas.transferToImageBitmap() 193 workerPort.postMessage({ myImage: image }); 194 } 195} 196``` 197 198 
