HarmonyOS鸿蒙Next中多种图片操作实现方法示例代码

HarmonyOS鸿蒙Next中多种图片操作实现方法示例代码本实例主要展示了图片应用场景相关demo。主要包括了图片预览、图片编辑美化、场景变化前后对比、图片切割九宫格、两张图片拼接、AI抠图、图片加水印等场景示例。

多种图片操作实现方法源码链接

图片预览

使用说明

点击图片，进入图片预览界面。可对图片进行缩放、拖拽等操作。

效果预览

图片编辑美化

使用说明

可对图片编辑，包含裁剪、旋转、色域调节（本章只介绍亮度、透明度、饱和度）、滤镜等功能。

效果预览

场景变化前后对比

使用说明

通过拖拽移动按钮，来展示两张图片的不同。

效果预览

图片切割九宫格

使用说明

通过图库选择一张图片，将其切割成九宫格展示，然后可保存到图库中。

效果预览

两张图片拼接

使用说明

通过图库选择一张图片，可横向拼接成一张图，也可竖向拼接成一张图。然后保存到图库。

效果预览

AI抠图

使用说明

长按需要被抠图的元素并拖拽。

效果预览

图片加水印

使用说明

从图库中选取图片，点击添加水印按钮。即可添加上水印。

效果预览

更多关于HarmonyOS鸿蒙Next中多种图片操作实现方法示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

nodeper 1楼•7 天前

在HarmonyOS鸿蒙Next中，图片操作可以通过多种方式实现。以下是一些常见的图片操作示例代码：

加载图片：

[@Component](/user/Component)
struct ImageExample {
  build() {
    Column() {
      Image($r('app.media.icon'))
        .width(100)
        .height(100)
    }
  }
}

缩放图片：

[@Component](/user/Component)
struct ScaleImageExample {
  build() {
    Column() {
      Image($r('app.media.icon'))
        .width(200)
        .height(200)
        .objectFit(ImageFit.Contain)
    }
  }
}

裁剪图片：

[@Component](/user/Component)
struct ClipImageExample {
  build() {
    Column() {
      Image($r('app.media.icon'))
        .width(100)
        .height(100)
        .clip(new Circle({ width: 50, height: 50 }))
    }
  }
}

旋转图片：

[@Component](/user/Component)
struct RotateImageExample {
  build() {
    Column() {
      Image($r('app.media.icon'))
        .width(100)
        .height(100)
        .rotate(45)
    }
  }
}

设置图片滤镜：

[@Component](/user/Component)
struct FilterImageExample {
  build() {
    Column() {
      Image($r('app.media.icon'))
        .width(100)
        .height(100)
        .filter(new ImageFilter.Grayscale())
    }
  }
}

图片动画：

[@Component](/user/Component)
struct AnimateImageExample {
  @State scale: number = 1

  build() {
    Column() {
      Image($r('app.media.icon'))
        .width(100)
        .height(100)
        .scale({ x: this.scale, y: this.scale })
        .animation({ duration: 1000, curve: Curve.EaseInOut })
    }
  }

  aboutToAppear() {
    setInterval(() => {
      this.scale = this.scale === 1 ? 1.5 : 1
    }, 1000)
  }
}

以上代码展示了在HarmonyOS鸿蒙Next中实现图片加载、缩放、裁剪、旋转、滤镜和动画的基本方法。开发者可以根据具体需求进行扩展和调整。

更多关于HarmonyOS鸿蒙Next中多种图片操作实现方法示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

zlyuanteng 2楼•7 天前

在HarmonyOS鸿蒙Next中，可以使用以下代码示例来实现多种图片操作：

加载图片：

Image image = new Image(context)
image.setPixelMap(ResourceTable.Media_image)

缩放图片：

image.setScaleX(0.5f) // 水平缩放50%
image.setScaleY(0.5f) // 垂直缩放50%

旋转图片：

image.setRotation(90) // 旋转90度

裁剪图片：

PixelMap pixelMap = image.getPixelMap()
PixelMap croppedPixelMap = PixelMap.createCroppedPixelMap(pixelMap, new Rect(50, 50, 200, 200))
image.setPixelMap(croppedPixelMap)

设置图片透明度：

image.setAlpha(0.5f) // 设置透明度为50%

这些代码示例展示了如何在HarmonyOS鸿蒙Next中实现常见的图片操作。