• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Handling HEIF Images
2<!--Kit: Image Kit-->
3<!--Subsystem: Multimedia-->
4<!--Owner: @aulight02-->
5<!--Designer: @liyang_bryan-->
6<!--Tester: @xchaosioda-->
7<!--Adviser: @zengyawen-->
8
9## Introduction to HEIF Images
10
11High Efficiency Image File Format (HEIF) is a file format for individual images or image sequences. It is developed by the Moving Picture Experts Group (MPEG) and defined in MPEG-H Part 12 (ISO/IEC 23008-12).
12
13Most mainstream HEIF images currently use HEVC (H.265) encoding, which is also the HEIF image format supported by the system. HEIF images offer significant advantages in compression efficiency, reducing file size by about 50% compared to JPEG while maintaining image quality.
14
15The system has supported HEIF image encoding, decoding, and display since API version 12. If your application uses system modules such as Image Kit, ArkUI **Image** component, or ArkWeb to implement image processing, you can handle HEIF images in the same way as JPEG, PNG, and other formats.
16
17For details about how to decode HEIF images, see [Using ImageSource to Decode Images](../image-decoding.md) and [Using Image_NativeModule to Decode Images](../image-source-c.md).
18
19For details about how to display HEIF images, see [Image Display (Image)](../../../ui/arkts-graphics-display.md).
20
21For details about how to encode HEIF images, see [Image Encoding Guide (ArkTS)](../image-encoding.md) and [Image Encoding Guide (C/C++)](../image-packer-c.md).
22
23For details about how to upload HEIF images using ArkWeb, see [Uploading a File Using a Web Component](../../../web/web-file-upload.md).
24
25## FAQs
26
27### What should I do when a message is displayed indicating unsupported format when uploading HEIF images?
28
29This issue typically arises because the application has filtering restrictions on image files with extensions .heic, .heif, .HEIC, and .HEIF.
30
31For applications using the image processing capabilities of the system, simply remove the filtering restrictions for normal uploading and displaying of HEIF images.
32
33If your application does not use the image processing capabilities of the system, additional adaptations may be necessary. One optional solution is to transcode HEIF images into JPEG images.
34
35### How do I use JPEG or PNG images to avoid compatibility issues with HEIF images?
36
37You can use the image encoding and decoding capabilities of Image Kit to transcode HEIF images into JPEG images. Here is an example code snippet:
38```ts
39import { BusinessError } from '@kit.BasicServicesKit';
40import { fileIo as fs } from '@kit.CoreFileKit';
41import { image } from '@kit.ImageKit';
42
43async function reEncoding(context : Context, fd : number) {
44    // Obtain the FD of the image file and create an ImageSource.
45    const imageSource : image.ImageSource = image.createImageSource(fd);
46    // Create an ImagePacker to call the image encoding API.
47    const imagePackerApi = image.createImagePacker();
48    // Configure image encoding options.
49    // Use the standard mimetype format, for example, "image/jpeg," "image/png," and "image/heic."
50    // You are advised to set quality to 80 to ensure good image quality and reduce the size of the encoded image file.
51    // The needsPackProperties parameter is used to determine whether to save image properties during encoding. The default value is false, indicating that the configuration is not saved.
52    let packOpts : image.PackingOption = { format:"image/jpeg", quality:80, needsPackProperties:false };
53    // Specify the path for storing the encoded image file.
54    const filePath : string = context.cacheDir + "/result.jpg";
55    let file = fs.openSync(filePath, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE);
56    imagePackerApi.packToFile(imageSource, file.fd, packOpts).then(() => {
57        console.info('Succeed to pack the image.');
58    }).catch((error : BusinessError) => {
59        console.error('Failed to pack the image. And the error is: ' + error);
60    }).finally(()=>{
61        fs.closeSync(file.fd);
62    })
63}
64```
65
66The process of transcoding images using C APIs is similar. First, create ImageSource and ImagePacker instances, then specify encoding parameters and call the image encoding interface to complete the transcoding. For details about the sample code, see [Using Image_NativeModule to Encode Images](../image-packer-c.md).
67