harmony 鸿蒙Using PixelMap to Transform Images

  • 2025-06-12
  • 浏览 (3)

Using PixelMap to Transform Images

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 Image for APIs related to image transformation.

  1. Complete image decoding and obtain a PixelMap object.

  2. Obtain image information.

   import { BusinessError } from '@kit.BasicServicesKit';
   // Obtain the image size.
   pixelMap.getImageInfo().then( (info : image.ImageInfo) => {
     console.info('info.width = ' + info.size.width);
     console.info('info.height = ' + info.size.height);
   }).catch((err : BusinessError) => {
     console.error("Failed to obtain the image pixel map information.And the error is: " + err);
   });
  1. Perform image transformation.

Original image:

 ![Original drawing](figures/original-drawing.jpeg)
  • Crop the image.

     // x: x-axis coordinate of the start point for cropping (0).
     // y: y-axis coordinate of the start point for cropping (0).
     // height: height after cropping (400), cropping from top to bottom.
     // width: width after cropping (400), cropping from left to right.
     pixelMap.crop({x: 0, y: 0, size: { height: 400, width: 400 } });
    

    cropping

  • Scale the image.

     // The width of the image after scaling is 0.5 of the original width.
     // The height of the image after scaling is 0.5 of the original height.
     pixelMap.scale(0.5, 0.5);
    

    zoom

  • Translate the image.

     // Translate the image by 100 units downwards.
     // Translate the image by 100 units rightwards.
     pixelMap.translate(100, 100);
    

    offsets

  • Rotate the image.

     // Rate the image clockwise by 90°.
     pixelMap.rotate(90);
    

    rotate

  • Flip the image.

     // Flip the image vertically.
     pixelMap.flip(false, true);
    

    Vertical Flip

     // Flip the image horizontally.
     pixelMap.flip(true, false);
    

    Horizontal Flip

  • Set the opacity of the image.

     // Set the opacity to 0.5.
     pixelMap.opacity(0.5);
    

    Transparency

你可能感兴趣的鸿蒙文章

harmony 鸿蒙Image Kit

harmony 鸿蒙Allocating Memory for Image Decoding (C/C++)

harmony 鸿蒙Allocating Memory for Image Decoding (ArkTS)

harmony 鸿蒙Image Decoding

harmony 鸿蒙Using ImageSource to Decode Images

harmony 鸿蒙Using ImageEffect to Edit Images

harmony 鸿蒙Image Encoding

harmony 鸿蒙Using ImagePacker to Encode Images

harmony 鸿蒙Using Image_NativeModule to Process Image Information

harmony 鸿蒙Introduction to Image Kit

0  赞