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)中,可以通过PixelMap
和EffectKit
实现图片模糊处理。以下是一个简单示例:
// 获取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
对图片进行模糊处理,模糊半径可根据需求调整。