DEV Community

SoulHarbor
SoulHarbor

Posted on

Implementing ImageBitmap Image Editing in ArkTS

#harmonyos #arkts

In HarmonyOS ArkTS development, image processing is a core requirement for building rich media applications. This article deeply analyzes the implementation of image editing based on the ImageBitmap API, demonstrating how to leverage OffscreenCanvas for core operations like cropping, scaling, and resolution adjustment, providing developers with a complete image processing solution.

I. Technical Stack Analysis of ImageBitmap & OffscreenCanvas

By combining ImageBitmap with OffscreenCanvas's off-screen rendering capabilities, we can perform complex image operations without blocking the main thread. The typical processing flow is shown below:

const offscreenCanvas = new OffscreenCanvas(width, height);
const ctx = offscreenCanvas.getContext('2d');
// Image operations...
return offscreenCanvas.transferToImageBitmap();
Enter fullscreen mode Exit fullscreen mode

II. Core Image Processing Implementations

1. Smart Cropping (cropImageBitmap) 

public static async cropImageBitmap(imageBitmap: ImageBitmap, 
  sx: number, sy: number, sw: number, sh: number) {
  // Create canvas matching crop area
  const offscreenCanvas = new OffscreenCanvas(sw, sh);
  const ctx = offscreenCanvas.getContext('2d');

  // Key parameter mapping:
  // Source region (sx,sy,sw,sh) → Target canvas (0,0,sw,sh)
  ctx.drawImage(imageBitmap, sx, sy, sw, sh, 0, 0, sw, sh);

  return offscreenCanvas.transferToImageBitmap();
}
Enter fullscreen mode Exit fullscreen mode

Implementation Features:

  • Precise coordinate conversion: Supports arbitrary region selection
  • Pixel-perfect mapping: Avoids scaling distortion
  • Asynchronous processing: Suitable for large images

2. Dynamic Scaling System

Contains two scaling modes:

a. Proportional Scaling (scaleImageBitmap) 

public static async scaleImageBitmap(imageBitmap: ImageBitmap, scale: number) {
  const scaledWidth = imageBitmap.width * scale;
  const scaledHeight = imageBitmap.height * scale;

  // Parameter mapping:
  // Source dimensions (0,0,w,h) → Target dimensions (0,0,scaledW,scaledH)
  ctx.drawImage(imageBitmap, 0, 0, imageBitmap.width, imageBitmap.height, 
              0, 0, scaledWidth, scaledHeight);
}
Enter fullscreen mode Exit fullscreen mode

b. Resolution Adaptation (changeImageResolution) 

offscreenContext.imageSmoothingEnabled = false; // Critical optimization
ctx.drawImage(imageBitmap, 0, 0, imageBitmap.width, imageBitmap.height,
            0, 0, newWidth, newHeight);
Enter fullscreen mode Exit fullscreen mode

Implementation Differences:

  • Proportional scaling: Maintains aspect ratio, suitable for thumbnails
  • Resolution adaptation: Enforces specified dimensions, ideal for precise layouts
  • Smoothing disabled: Preserves sharp edges for pixel art scenarios

3. Canvas Extension (extendImageResolution) 

public static async extendImageResolution(imageBitmap: ImageBitmap, 
  newWidth: number, newHeight: number) {
  // Key parameter: Only specifies target canvas dimensions
  ctx.drawImage(imageBitmap, 0, 0); // Auto-fill mode
}
Enter fullscreen mode Exit fullscreen mode

Typical Use Cases:

  • Adding canvas borders
  • Creating padding layouts
  • Dynamic watermark overlay

4. ImageBitmap to PixelMap Conversion (imageBitmap2PixelMap) 

public static imageBitmap2PixelMap(imageBitmap: ImageBitmap) {
  const ctx = offscreenCanvas.getContext('2d');
  ctx.drawImage(imageBitmap, 0, 0);
  return ctx.getPixelMap(0, 0, offscreenCanvas.width, offscreenCanvas.height);
}
Enter fullscreen mode Exit fullscreen mode

III. Summary

This article implements a complete ImageBitmap processing solution in ArkTS, covering typical scenarios from basic cropping/scaling to advanced pixel operations. Developers can quickly build image processing systems that meet business requirements by combining these foundational modules. The asynchronous nature of OffscreenCanvas combined with ImageBitmap's efficient pixel management provides a robust foundation for modern image processing in HarmonyOS applications.

Top comments (0)