调用effectKit.createEffect.blur方法无法模糊下载的网络图片,请问该方法如何正确使用?

import http from '@ohos.net.http'; 
import image from '@ohos.multimedia.image'; 
import effectKit from '@ohos.effectKit'; 
@Component 
export struct TestBlurImage { 
  @State blurBackImage?: image.PixelMap = undefined 
  @State filter?: ColorFilter = undefined 
  aboutToAppear(): void { 
    this.getImage() 
  } 
  getImage() { 
    let httpRequest = http.createHttp(); 
    let requestUrl = 'https://assets-res-cn.c.huawei.com/operationcenter/myhuawei/cn/greater_china/img/6596682867f4d67efa8cf4ee.jpg'; 
    httpRequest.request(requestUrl) 
      .then((response) => { 
        if (response.responseCode == http.ResponseCode.OK) { 
          let imageData = response?.result as ArrayBuffer 
          let imageSource: image.ImageSource = image.createImageSource(imageData); 
          if (!imageSource) { 
            console.log('get image fail1') 
            return; 
          } 
          let opts: image.InitializationOptions = { 
            editable: true, 
            pixelFormat: 3, 
            size: { 
              height: 0, 
              width: 0 
            } 
          }; 
          imageSource?.createPixelMap(opts).catch((reason: Object) => { 
            console.log('createPixelMap fail 2') 
            return undefined; 
          }).then((pixelMap) => { 
            let radius = 50; 
            let headFilter = effectKit.createEffect(pixelMap); 
            if (headFilter != null) { 
              this.filter = headFilter.blur(radius); 
              this.blurBackImage = pixelMap; 
            } else { 
              console.log('get effect fail') 
            } 
          }) 
        } else { 
          console.log('get image fail 2') 
        } 
        // 当该请求使用完毕时,调用destroy方法主动销毁 
        httpRequest.destroy(); 
      }) 
  } 
  build() { 
    Column() { 
      Image(this.blurBackImage) 
        .height(204) 
        .width('100%') 
    } 
  } 
}
HarmonyOS
2024-04-27 23:05:39
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
elucky

需要调用getEffectPixelMap获取模糊完成后的图片,正确的使用方式如下:

this.filter = headFilter.blur(radius).getEffectPixelMap().then((result: PixelMap) => { 
  this.blurBackImage = result; 
})
分享
微博
QQ
微信
回复
2024-04-28 17:32:56
相关问题
请问Image控件是怎样设置网络图片
8638浏览 • 3回复 已解决
Image组件如何加载网络图片
488浏览 • 1回复 待解决
JSBind 如何调用 JS 方法 callback
279浏览 • 1回复 待解决
native侧如何调用静态方法
146浏览 • 1回复 待解决
服务卡片image怎么获取网络图片
5202浏览 • 2回复 待解决
外部调用har里方法,如何跳转页面
180浏览 • 1回复 待解决
ArkTS中globalThis无法使用如何替换
263浏览 • 1回复 待解决
touchEvent使用方法
5076浏览 • 1回复 待解决
native侧如何使用静态方法
99浏览 • 1回复 待解决
jsBridge中如何正确使用this
45浏览 • 1回复 待解决
图片如何添加渐变模糊
292浏览 • 1回复 待解决
弹窗组件无法进入onPageShow方法
290浏览 • 1回复 待解决
如何设置图片高斯模糊效果
753浏览 • 1回复 待解决