• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 使用ImagePacker完成图片编码
2<!--Kit: Image Kit-->
3<!--Subsystem: Multimedia-->
4<!--Owner: @aulight02-->
5<!--Designer: @liyang_bryan-->
6<!--Tester: @xchaosioda-->
7<!--Adviser: @zengyawen-->
8
9图片编码指将PixelMap编码成不同格式的图片文件，当前支持编码为JPEG、WebP、PNG和 HEIF（不同硬件设备支持情况不同）格式，用于后续处理，如保存、传输等。
10
11## 开发步骤
12
13图片编码相关API的详细介绍请参见：[图片编码接口说明](../../reference/apis-image-kit/arkts-apis-image-ImagePacker.md)。
14
15### 图片编码进文件流
16
171. 创建图像编码ImagePacker对象。
18
19   ```ts
20   // 导入相关模块包。
21   import { image } from '@kit.ImageKit';
22   import { BusinessError } from '@kit.BasicServicesKit';
23
24   const imagePackerApi = image.createImagePacker();
25   ```
26
272. 设置编码输出流和编码参数。
28
29    - format为图像的编码格式；quality为图像质量，范围从0-100，100为最佳质量。
30
31      > **说明：**
32      > 根据MIME标准，标准编码格式为image/jpeg。当使用image编码时，PackingOption.format设置为image/jpeg，image编码后的文件扩展名可设为.jpg或.jpeg，可在支持image/jpeg解码的平台上使用。
33
34      ```ts
35      let packOpts : image.PackingOption = { format:"image/jpeg", quality:98 };
36      ```
37
38    - 编码为hdr内容(需要资源本身为hdr，支持jpeg格式)。
39      ```ts
40      packOpts.desiredDynamicRange = image.PackingDynamicRange.AUTO;
41      ```
42
433. 进行图片编码，并保存编码后的图片。
44
45   方法一：通过PixelMap进行编码。
46
47   ```ts
48   function packToDataFromPixelMap(context : Context, pixelMap : image.PixelMap) {
49     const imagePackerApi = image.createImagePacker();
50     let packOpts : image.PackingOption = { format:"image/jpeg", quality:98 };
51     imagePackerApi.packToData(pixelMap, packOpts).then( (data : ArrayBuffer) => {
52       // data 为编码获取到的文件流，写入文件保存即可得到一张图片。
53     }).catch((error : BusinessError) => {
54       console.error('Failed to pack the image. And the error is: ' + error);
55     })
56   }
57   ```
58
59   方法二：通过imageSource进行编码。
60
61   ```ts
62   function packToDataFromImageSource(context : Context, imageSource : image.ImageSource) {
63     const imagePackerApi = image.createImagePacker();
64     let packOpts : image.PackingOption = { format:"image/jpeg", quality:98 };
65     imagePackerApi.packToData(imageSource, packOpts).then( (data : ArrayBuffer) => {
66       // data 为编码获取到的文件流，写入文件保存即可得到一张图片。
67     }).catch((error : BusinessError) => {
68       console.error('Failed to pack the image. And the error is: ' + error);
69     })
70   }
71   ```
72
73### 图片编码进文件
74
75在编码时，开发者可以传入对应的文件路径，编码后的内存数据将直接写入文件。
76
77   方法一：通过PixelMap编码进文件。
78
79   ```ts
80   import { BusinessError } from '@kit.BasicServicesKit';
81   import { fileIo as fs } from '@kit.CoreFileKit';
82   import { image } from '@kit.ImageKit';
83
84   function packToFile(context : Context, pixelMap : image.PixelMap) {
85     const imagePackerApi = image.createImagePacker();
86     let packOpts : image.PackingOption = { format:"image/jpeg", quality:98 };
87     const path : string = context.cacheDir + "/pixel_map.jpg";
88     let file = fs.openSync(path, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE);
89     imagePackerApi.packToFile(pixelMap, file.fd, packOpts).then(() => {
90         // 直接编码进文件。
91     }).catch((error : BusinessError) => {
92       console.error('Failed to pack the image. And the error is: ' + error);
93     }).finally(() => {
94       fs.closeSync(file.fd);
95     })
96   }
97   ```
98
99   方法二：通过imageSource编码进文件。
100
101   ```ts
102   import { BusinessError } from '@kit.BasicServicesKit';
103   import { fileIo as fs } from '@kit.CoreFileKit';
104   import { image } from '@kit.ImageKit';
105
106   function packToFile(context : Context, imageSource : image.ImageSource) {
107     const imagePackerApi = image.createImagePacker();
108     let packOpts : image.PackingOption = { format:"image/jpeg", quality:98 };
109     const filePath : string = context.cacheDir + "/image_source.jpg";
110     let file = fs.openSync(filePath, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE);
111     imagePackerApi.packToFile(imageSource, file.fd, packOpts).then(() => {
112         // 直接编码进文件。
113     }).catch((error : BusinessError) => {
114       console.error('Failed to pack the image. And the error is: ' + error);
115     }).finally(() => {
116       fs.closeSync(file.fd);
117     })
118   }
119   ```
120
121### 图片编码保存进图库
122
123可以将图片编码保存到应用沙箱，然后使用媒体文件管理相关接口[保存媒体库资源](../medialibrary/photoAccessHelper-savebutton.md)。
124
125<!--RP1-->
126<!--RP1End-->