image-decoding.md 4.9 KB
Newer Older
Z
zengyawen 已提交
1 2
# 图片解码

Z
zengyawen 已提交
3
图片解码指将所支持格式的存档图片解码成统一的[PixelMap](image-overview.md),以便在应用或系统中进行图片显示或[图片处理](image-transformation.md)。当前支持的存档图片格式包括JPEG、PNG、GIF、RAW、WebP、BMP、SVG。
Z
zengyawen 已提交
4 5 6 7 8 9 10 11 12 13 14 15

## 开发步骤

图片解码相关API的详细介绍请参见:[图片解码接口说明](../reference/apis/js-apis-image.md#imagesource)

1. 全局导入Image模块。
     
   ```ts
   import image from '@ohos.multimedia.image';
   ```

2. 获取图片。
16
   - 方法一:获取沙箱路径。具体请参考[获取应用文件路径](../application-models/application-context-stage.md#获取应用文件路径)。应用沙箱的介绍及如何向应用沙箱推送文件,请参考[文件管理](../file-management/app-sandbox-directory.md)
Z
zengyawen 已提交
17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110
        
      ```ts
      // Stage模型参考如下代码
      const context = getContext(this);
      const filePath = context.cacheDir + '/test.jpg';
      ```

      ```ts
      // FA模型参考如下代码
      import featureAbility from '@ohos.ability.featureAbility';
      
      const context = featureAbility.getContext();
      const filePath = context.getCacheDir() + "/test.jpg";
      ```
   - 方法二:通过沙箱路径获取图片的文件描述符。具体请参考[file.fs API参考文档](../reference/apis/js-apis-file-fs.md)
      该方法需要先导入\@ohos.file.fs模块。

      ```ts
      import fs from '@ohos.file.fs';
      ```

      然后调用fs.openSync()获取文件描述符。
  
      ```ts
      // Stage模型参考如下代码
      const context = getContext(this);
      const filePath = context.cacheDir + '/test.jpg';
      const file = fs.openSync(filePath, fs.OpenMode.READ_WRITE);
      const fd = file?.fd;
      ```

      ```ts
      // FA模型参考如下代码
      import featureAbility from '@ohos.ability.featureAbility';
      
      const context = featureAbility.getContext();
      const filePath = context.getCacheDir() + "/test.jpg";
      const file = fs.openSync(filePath, fs.OpenMode.READ_WRITE);
      const fd = file?.fd;
      ```
   - 方法三:通过资源管理器获取资源文件的ArrayBuffer。具体请参考[ResourceManager API参考文档](../reference/apis/js-apis-resource-manager.md#getrawfilecontent9-1)
        
      ```ts
      // Stage模型
      const context = getContext(this);
      // 获取resourceManager资源管理器
      const resourceMgr = context.resourceManager;
      ```

      ```ts
      // FA模型
      // 导入resourceManager资源管理器
      import resourceManager from '@ohos.resourceManager';
      const resourceMgr = await resourceManager.getResourceManager();
      ```

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

      ```ts
      const fileData = await resourceMgr.getRawFileContent('test.jpg');
      // 获取图片的ArrayBuffer
      const buffer = fileData.buffer;
      ```

3. 创建ImageSource实例。
   - 方法一:通过沙箱路径创建ImageSource。沙箱路径可以通过步骤2的方法一获取。
        
      ```ts
      // path为已获得的沙箱路径
      const imageSource = image.createImageSource(filePath);
      ```
   - 方法二:通过文件描述符fd创建ImageSource。文件描述符可以通过步骤2的方法二获取。
        
      ```ts
      // fd为已获得的文件描述符
      const imageSource = image.createImageSource(fd);
      ```
   - 方法三:通过缓冲区数组创建ImageSource。缓冲区数组可以通过步骤2的方法三获取。
        
      ```ts
      const imageSource = image.createImageSource(buffer);
      ```

4. 设置解码参数DecodingOptions,解码获取PixelMap图片对象。
     
   ```ts
   let decodingOptions = {
       editable: true,
       desiredPixelFormat: 3,
   }
   // 创建pixelMap并进行简单的旋转和缩放 
   const pixelMap = await imageSource.createPixelMap(decodingOptions);
   ```

Z
zengyawen 已提交
111
   解码完成,获取到PixelMap对象后,可以进行后续[图片处理](image-transformation.md)
Z
zengyawen 已提交
112

113 114 115 116 117
5. 释放pixelMap。
   ```ts
   pixelMap.release();
   ```

Z
zengyawen 已提交
118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146
## 开发示例-对资源文件中的图片进行解码

1. 获取resourceManager资源管理。
     
   ```ts
   const context = getContext(this);
   // 获取resourceManager资源管理
   const resourceMgr = context.resourceManager;
   ```

2. 获取rawfile文件夹下test.jpg的ArrayBuffer。
     
   ```ts
   const fileData = await resourceMgr.getRawFileContent('test.jpg');
   // 获取图片的ArrayBuffer
   const buffer = fileData.buffer;
   ```

3. 创建imageSource。
     
   ```ts
   const imageSource = image.createImageSource(buffer);
   ```

4. 创建PixelMap。
     
   ```ts
   const pixelMap = await imageSource.createPixelMap();
   ```
147 148 149 150 151

5. 释放pixelMap。
   ```ts
   pixelMap.release();
   ```