HarmonyOS 鸿蒙Next 图片模糊处理示例

HarmonyOS 鸿蒙Next 图片模糊处理示例 备注:模拟器没效果,要真机才行。

```javascript
import image from '[@ohos](/user/ohos).multimedia.image'
import effectKit from '[@ohos](/user/ohos).effectKit'

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Page40 {
  [@State](/user/State) image: PixelMap = null

  aboutToAppear() {
    //D:\harmonyOS\MyDemo\entry\src\main\resources\base\media\icon_1.png
    getContext(this).resourceManager.getMediaByName('icon_1').then(over => {
      let ii = image.createImageSource(over.buffer)
      ii.createPixelMap((e, data) => {
        let hh = effectKit.createEffect(data)
        this.image = hh.blur(10).getPixelMap()
      })
    }).catch(e => {
      console.info('====image error', JSON.stringify(e))
    })
  }

  build() {
    Row() {
      Column() {
        Image(this.image)
          .width('90%')
          .aspectRatio(1)
          .borderRadius(5)
          .shadow({ radius: 55, offsetX: 0, offsetY: 54, color: "rgba(0,0,0,0.25)" })
          .sharedTransition("music-cover", { duration: 600, curve: Curve.Sharp })
          .objectFit(ImageFit.Cover)
      }
      .width('100%')
    }
    .height('100%')
  }
}
3 回复

你好!

你的做法是先blur,生成一个pixmap。那如果是先生成一个pixmap,再在image组件使用blur属性,两种方法有什么区别呢?

更多关于HarmonyOS 鸿蒙Next 图片模糊处理示例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,图片模糊处理可以通过使用Image组件和BlurEffect来实现。以下是一个简单的示例代码:

import { Image, BlurEffect } from '@ohos.media.image';

// 加载图片
let image = new Image();
image.src = 'path/to/your/image.jpg';

// 创建模糊效果
let blurEffect = new BlurEffect();
blurEffect.radius = 10; // 设置模糊半径

// 应用模糊效果
image.effect = blurEffect;

// 将处理后的图片显示在界面上
document.body.appendChild(image);

在这个示例中,首先通过Image组件加载图片,然后使用BlurEffect创建模糊效果,并设置模糊半径。最后将处理后的图片显示在界面上。

需要注意的是,模糊半径的值越大,图片的模糊程度越高。开发者可以根据实际需求调整模糊半径的值。

在HarmonyOS(鸿蒙Next)中,可以通过PixelMapEffectKit实现图片模糊处理。以下是一个简单示例:

// 获取PixelMap对象
PixelMap pixelMap = ...; // 从资源或文件加载图片

// 创建EffectKit实例
EffectKit effectKit = new EffectKit();

// 应用模糊效果
PixelMap blurredPixelMap = effectKit.applyBlur(pixelMap, 25); // 25为模糊半径

// 将处理后的图片显示在Image组件中
Image image = findViewById(R.id.imageView);
image.setPixelMap(blurredPixelMap);

此代码通过EffectKit对图片进行模糊处理,模糊半径可根据需求调整。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!