使用ImageSource完成图片解码-图片开发指导(ArkTS)-Image Kit（图片处理服务）-媒体

图片解码指将所支持格式的存档图片解码成统一的PixelMap，以便在应用或系统中进行图片显示或图片处理。当前支持的存档图片格式包括JPEG、PNG、GIF、WebP、BMP、SVG、ICO、DNG、HEIF(不同硬件设备支持情况不同)。

开发步骤

图片解码相关API的详细介绍请参见：图片解码接口说明。

全局导入Image模块。
收起
自动换行
深色代码主题
复制
```
import { image } from '@kit.ImageKit';
```

获取图片。

方法一：获取沙箱路径。具体请参考获取应用文件路径。应用沙箱的介绍及如何向应用沙箱推送文件，请参考文件管理。
收起
自动换行
深色代码主题
复制
```
const context : Context = getContext(this);
const filePath : string = context.cacheDir + '/test.jpg';
```
方法二：通过沙箱路径获取图片的文件描述符。具体请参考file.fs API参考文档。

该方法需要先导入@kit.CoreFileKit模块。
收起
自动换行
深色代码主题
复制
```
import { fileIo as fs } from '@kit.CoreFileKit';
```
然后调用fs.openSync()获取文件描述符。
收起
自动换行
深色代码主题
复制
```
const context = getContext(this);
const filePath = context.cacheDir + '/test.jpg';
const file : fs.File = fs.openSync(filePath, fs.OpenMode.READ_WRITE);
const fd : number = file?.fd;
```

方法三：通过资源管理器获取资源文件的ArrayBuffer。具体请参考ResourceManager API参考文档。

收起
自动换行
深色代码主题
复制
// 导入resourceManager资源管理器
import { resourceManager } from '@kit.LocalizationKit';

const context : Context = getContext(this);
// 获取resourceManager资源管理器
const resourceMgr : resourceManager.ResourceManager = context.resourceManager;

不同模型获取资源管理器的方式不同，获取资源管理器后，再调用resourceMgr.getRawFileContent()获取资源文件的ArrayBuffer。

收起
自动换行
深色代码主题
复制
resourceMgr.getRawFileContent('test.jpg').then((fileData : Uint8Array) => {
   console.log("Succeeded in getting RawFileContent")
   // 获取图片的ArrayBuffer
   const buffer = fileData.buffer.slice(0);
}).catch((err : BusinessError) => {
   console.error("Failed to get RawFileContent")
});

方法四：通过资源管理器获取资源文件的RawFileDescriptor。具体请参考ResourceManager API参考文档。

收起
自动换行
深色代码主题
复制
// 导入resourceManager资源管理器
import { resourceManager } from '@kit.LocalizationKit';

const context : Context = getContext(this);
// 获取resourceManager资源管理器
const resourceMgr : resourceManager.ResourceManager = context.resourceManager;

不同模型获取资源管理器的方式不同，获取资源管理器后，再调用resourceMgr.getRawFd()获取资源文件的RawFileDescriptor。

收起
自动换行
深色代码主题
复制
resourceMgr.getRawFd('test.jpg').then((rawFileDescriptor : resourceManager.RawFileDescriptor) => {
   console.log("Succeeded in getting RawFileDescriptor")
}).catch((err : BusinessError) => {
   console.error("Failed to get RawFileDescriptor")
});

创建ImageSource实例。
- 方法一：通过沙箱路径创建ImageSource。沙箱路径可以通过步骤2的方法一获取。
  收起
  自动换行
  深色代码主题
  复制
```
// path为已获得的沙箱路径
const imageSource : image.ImageSource = image.createImageSource(filePath);
```
- 方法二：通过文件描述符fd创建ImageSource。文件描述符可以通过步骤2的方法二获取。
  收起
  自动换行
  深色代码主题
  复制
```
// fd为已获得的文件描述符
const imageSource : image.ImageSource = image.createImageSource(fd);
```
- 方法三：通过缓冲区数组创建ImageSource。缓冲区数组可以通过步骤2的方法三获取。
  收起
  自动换行
  深色代码主题
  复制
```
const imageSource : image.ImageSource = image.createImageSource(buffer);
```
- 方法四：通过资源文件的RawFileDescriptor创建ImageSource。RawFileDescriptor可以通过步骤2的方法四获取。
  收起
  自动换行
  深色代码主题
  复制
```
const imageSource : image.ImageSource = image.createImageSource(rawFileDescriptor);
```

设置解码参数DecodingOptions，解码获取pixelMap图片对象。

设置期望的format进行解码：

收起
自动换行
深色代码主题
复制
import { BusinessError } from '@kit.BasicServicesKit';
import { image } from '@kit.ImageKit';

let img = await getContext(this).resourceManager.getMediaContent($r('app.media.image'));
let imageSource:image.ImageSource = image.createImageSource(img.buffer.slice(0));
let decodingOptions : image.DecodingOptions = {
   editable: true,
   desiredPixelFormat: 3,
}
// 创建pixelMap
imageSource.createPixelMap(decodingOptions).then((pixelMap : image.PixelMap) => {
   console.log("Succeeded in creating PixelMap")
}).catch((err : BusinessError) => {
   console.error("Failed to create PixelMap")
});

HDR图片解码

收起
自动换行
深色代码主题
复制
import { BusinessError } from '@kit.BasicServicesKit';
import { image } from '@kit.ImageKit';

let img = await getContext(this).resourceManager.getMediaContent($r('app.media.CUVAHdr'));
let imageSource:image.ImageSource = image.createImageSource(img.buffer.slice(0));
let decodingOptions : image.DecodingOptions = {
   //设置为AUTO会根据图片资源格式解码，如果图片资源为HDR资源则会解码为HDR的pixelmap。
   desiredDynamicRange: image.DecodingDynamicRange.AUTO,
}
// 创建pixelMap
imageSource.createPixelMap(decodingOptions).then((pixelMap : image.PixelMap) => {
   console.log("Succeeded in creating PixelMap")
   // 判断pixelmap是否为hdr内容
   let info = pixelMap.getImageInfoSync();
   console.log("pixelmap isHdr:" + info.isHdr);
}).catch((err : BusinessError) => {
   console.error("Failed to create PixelMap")
});

解码完成，获取到pixelMap对象后，可以进行后续图片处理。

释放pixelMap和imageSource。

需确认pixelMap和imageSource异步方法已经执行完成，不再使用该变量后可按需手动调用下面方法释放。
收起
自动换行
深色代码主题
复制
```
pixelMap.release();
imageSource.release();
```

开发示例-对资源文件中的图片进行解码

获取resourceManager资源管理。

收起
自动换行
深色代码主题
复制
// 导入resourceManager资源管理器
import { resourceManager } from '@kit.LocalizationKit';

const context : Context = getContext(this);
// 获取resourceManager资源管理
const resourceMgr : resourceManager.ResourceManager = context.resourceManager;

创建ImageSource。

方式一：通过rawfile文件夹下test.jpg的ArrayBuffer创建。

收起
自动换行
深色代码主题
复制
 import { BusinessError } from '@kit.BasicServicesKit';

 resourceMgr.getRawFileContent('test.jpg').then((fileData : Uint8Array) => {
    console.log("Succeeded in getting RawFileContent")
    // 获取图片的ArrayBuffer
    const buffer = fileData.buffer.slice(0);
    const imageSource : image.ImageSource = image.createImageSource(buffer);
 }).catch((err : BusinessError) => {
    console.error("Failed to get RawFileContent")
 });

方式二：通过rawfile文件夹下test.jpg的RawFileDescriptor创建。

收起
自动换行
深色代码主题
复制
 import { BusinessError } from '@kit.BasicServicesKit';

 resourceMgr.getRawFd('test.jpg').then((rawFileDescriptor : resourceManager.RawFileDescriptor) => {
    console.log("Succeeded in getting RawFd")
    const imageSource : image.ImageSource = image.createImageSource(rawFileDescriptor);
 }).catch((err : BusinessError) => {
    console.error("Failed to get RawFd")
 });

创建pixelMap。

收起
自动换行
深色代码主题
复制
imageSource.createPixelMap().then((pixelMap: image.PixelMap) => {
   console.log("Succeeded in creating PixelMap")
}).catch((err : BusinessError) => {
   console.error("Failed to creating PixelMap")
});

释放pixelMap和imageSource。

需确认pixelMap和imageSource异步方法已经执行完成，不再使用该变量后可按需手动调用下面方法释放。
收起
自动换行
深色代码主题
复制
```
pixelMap.release();
imageSource.release();
```

示例代码

水印添加能力