We use essential cookies for the website to function, as well as analytics cookies for analyzing and creating statistics of the website performance. To agree to the use of analytics cookies, click "Accept All". You can manage your preferences at any time by clicking "Cookie Settings" on the footer. More Information.

Cookie Settings
Only Essential Cookies
Accept All
MaterialsConsole

HarmonyOS

输入关键字搜索
HMS Core
AppGallery Connect
HUAWEI HiAI
CTRL+K
GuidesMediaImage KitImage Development (ArkTS)Image Editing and ProcessingUsing PixelMap to Transform Images

Using PixelMap to Transform Images

Last updated: 2026-01-14 08:39
Content overview

Image processing refers to a series of operations performed on the PixelMap, such as obtaining image information, cropping, scaling, translating, rotating, flipping, setting opacity, and reading and writing pixel data. These operations can be classified into image transformation and PixelMap operation. This topic describes the image transformation operations that you can perform.

How to Develop

Read the API reference for APIs related to image transformation.

  1. Complete image decoding and obtain a PixelMap object.

  2. Obtain image information.

    Collapse
    Word wrap
    Dark theme
    Copy code
    1. import { BusinessError } from '@kit.BasicServicesKit';
    2. // Obtain the image size.
    3. pixelMap.getImageInfo().then( (info : image.ImageInfo) => {
    4.   console.info('info.width = ' + info.size.width);
    5.   console.info('info.height = ' + info.size.height);
    6. }).catch((err : BusinessError) => {
    7.   console.error("Failed to obtain the image pixel map information.And the error is: " + err);
    8. });

  3. Perform image transformation.

    Original image:

    • Crop the image.

      Collapse
      Word wrap
      Dark theme
      Copy code
      1. // x: x-axis coordinate of the start point for cropping (0).
      2. // y: y-axis coordinate of the start point for cropping (0).
      3. // height: height after cropping (400), cropping from top to bottom.
      4. // width: width after cropping (400), cropping from left to right.
      5. pixelMap.crop({x: 0, y: 0, size: { height: 400, width: 400 } });

    • Scale the image.

      Collapse
      Word wrap
      Dark theme
      Copy code
      1. // The width of the image after scaling is 0.5 of the original width.
      2. // The height of the image after scaling is 0.5 of the original height.
      3. pixelMap.scale(0.5, 0.5);

    • Translate the image.

      Collapse
      Word wrap
      Dark theme
      Copy code
      1. // Translate the image by 100 units downwards.
      2. // Translate the image by 100 units rightwards.
      3. pixelMap.translate(100, 100);

    • Rotate the image.

      Collapse
      Word wrap
      Dark theme
      Copy code
      1. // Rotate the image clockwise by 90°.
      2. pixelMap.rotate(90);

    • Flip the image.

      Collapse
      Word wrap
      Dark theme
      Copy code
      1. // Flip the image vertically.
      2. pixelMap.flip(false, true);

      Collapse
      Word wrap
      Dark theme
      Copy code
      1. // Flip the image horizontally.
      2. pixelMap.flip(true, false);

    • Set the opacity of the image.

      Collapse
      Word wrap
      Dark theme
      Copy code
      1. // Set the opacity to 0.5.
      2. pixelMap.opacity(0.5);

Image Editing and Processing
Using PixelMap for PixelMap Operations
English
©2026 HUAWEI Developers. All rights reserved.
Terms of Use
Statement About HUAWEI Developers and Privacy
Cookies
Cookie Settings
Open-Source Software Notice
Search in Guides
Enter a keyword.