如何对网络图片处理,有人知道吗?

如何对网络图片处理

1、截取中间部分3/5图像

2、图片虚化

这种怎么实现。

HarmonyOS
2024-09-10 11:09:44
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

对于图片进行裁剪和虚化(遮罩)的效果,可以参考这个文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sharp-clipping

如果觉得上面文档中遮罩的效果不够,可以参考这个文档,有模糊图片的功能:https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-effectkit-V5#blur

需要调用getEffectPixelMap获取模糊完成后的图片

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: 200, 
              width: 400 
            } 
          }; 
          imageSource?.createPixelMap(opts).catch((reason: Object) => { 
            console.log('createPixelMap fail 2') 
            return undefined; 
          }).then((pixelMap: PixelMap | undefined) => { 
            let radius = 30; 
            let headFilter = effectKit.createEffect(pixelMap); 
            if (headFilter != null) { 
              this.filter = headFilter.blur(radius).getEffectPixelMap().then((result: PixelMap) => { 
                this.blurBackImage = result; 
              }) 
            } 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%') 
      // .colorFilter(this.filter) 
    } 
  } 
}
分享
微博
QQ
微信
回复
2024-09-10 16:02:36
相关问题
如何实现图片预览,有人知道吗
495浏览 • 1回复 待解决
图片压缩并保存方法,有人知道吗
720浏览 • 0回复 待解决
如何获取windowStage,有人知道吗
366浏览 • 1回复 待解决
如何实现振动,有人知道吗
1102浏览 • 2回复 待解决
如何保存faultLogger ,有人知道吗
546浏览 • 1回复 待解决
如何发送短信,有人知道吗?
1841浏览 • 1回复 待解决
如何跳出ForEach,有人知道吗
1949浏览 • 1回复 待解决
$$语法如何使用?有人知道吗
528浏览 • 1回复 待解决
如何实现镂空效果,有人知道吗?
298浏览 • 1回复 待解决
IP地址如何转化,有人知道吗
576浏览 • 1回复 待解决
如何获取组件高度,有人知道吗
2019浏览 • 1回复 待解决
如何获取系统电量,有人知道吗
1972浏览 • 1回复 待解决
如何查询设备类型?有人知道吗
298浏览 • 1回复 待解决
ArkTS要如何使用this,有人知道吗
421浏览 • 1回复 待解决
如何获取wifi列表,有人知道吗
437浏览 • 1回复 待解决
导航栏如何适配,有人知道吗?
1740浏览 • 0回复 待解决
如何引用HSP库,有人知道吗?
1597浏览 • 1回复 待解决
如何定义dialog动画,有人知道吗?
1859浏览 • 1回复 待解决
如何使用快速修复,有人知道吗
598浏览 • 1回复 待解决
如何实现翻页功能,有人知道吗
1866浏览 • 1回复 待解决
深色模式如何屏蔽?有人知道吗
237浏览 • 0回复 待解决
IDE如何开启ASAN,有人知道吗
230浏览 • 1回复 待解决
clientid相关问题,有人知道吗
1711浏览 • 1回复 待解决
webview组件demo ,有人知道吗
747浏览 • 1回复 待解决