目录

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

For details about the APIs related to image transformation, see Interface (PixelMap).

  1. Complete image decoding and obtain a PixelMap object.

  2. Obtain image information.

    // Obtain the image size.
await this.pixelMap.getImageInfo().then((info: image.ImageInfo) => {
  this.imageInfo = info;
  Logger.info('Image width: ', info.size.width.toString());
  Logger.info('Image height: ', info.size.height.toString());
}).catch((err: BusinessError) => {
  Logger.error('Failed to obtain the image pixel map information. The error is: ', String(err));
});

  3. Perform image transformation.

    Original image:

    • Crop the image.

      const imageInfo = this.pixelMap.getImageInfoSync();
const cropWidth = Math.min(400, imageInfo.size.width); // Prevent the crop area from exceeding the bounds when the original image width is less than 400.
const cropHeight = Math.min(400, imageInfo.size.height); // Prevent the crop area from exceeding the bounds when the original image height is less than 400.
// x: x-axis coordinate of the start point for cropping (0).
// y: y-axis coordinate of the start point for cropping (0).
// width: When the original image width is not less than 400, the crop width is 400, and the direction is from left to right (the cropped image width is 400).
// height: When the original image height is not less than 400, the crop height is 400, and the direction is from top to bottom (the cropped image height is 400).
this.pixelMap.crop({ x: 0, y: 0, size: { width: cropWidth, height: cropHeight } }).then(() => {
  // ...
});

    • Scale the image.

      // The width is 0.5 times the original.
// The height is 0.5 times the original.
this.pixelMap.scale(0.5, 0.5).then(() => {
  // ...
});

    • Translation

      // Translate downward by 100.
// Translate rightward by 100.
this.pixelMap.translate(100, 100).then(() => {
  // ...
});

    • Rotate the image.

      // Rotate the image clockwise by 90°.
this.pixelMap.rotate(90).then(() => {
  // ...
});

    • Flip the image.

      // Flip the image vertically.
this.pixelMap.flip(false, true).then(() => {
  // ...
});

      // Flip the image horizontally.
this.pixelMap.flip(true, false).then(() => {
  // ...
});

    • Set the opacity of the image.

      // Change the opacity of all pixels to 0.5.
this.pixelMap.opacity(0.5).then(() => {
  // ...
});

Sample Code