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

如何对网络图片处理

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) 
    } 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
分享
微博
QQ
微信
回复
2024-09-10 16:02:36
相关问题
如何实现图片预览,有人知道吗
1441浏览 • 1回复 待解决
图片压缩并保存方法,有人知道吗
1431浏览 • 0回复 待解决
如何获取windowStage,有人知道吗
1576浏览 • 1回复 待解决
如何实现振动,有人知道吗
2023浏览 • 2回复 待解决
$$语法如何使用?有人知道吗
1563浏览 • 1回复 待解决
如何发送短信,有人知道吗?
2880浏览 • 1回复 待解决
如何保存faultLogger ,有人知道吗
1518浏览 • 1回复 待解决
如何跳出ForEach,有人知道吗
3004浏览 • 1回复 待解决
IP地址如何转化,有人知道吗
1321浏览 • 1回复 待解决
如何查询设备类型?有人知道吗
1137浏览 • 1回复 待解决
ArkTS要如何使用this,有人知道吗
1407浏览 • 1回复 待解决
如何获取系统电量,有人知道吗
2902浏览 • 1回复 待解决
如何获取组件高度,有人知道吗
3029浏览 • 1回复 待解决
如何实现镂空效果,有人知道吗?
1081浏览 • 1回复 待解决
如何获取wifi列表,有人知道吗
1668浏览 • 1回复 待解决
如何实现翻页功能,有人知道吗
2802浏览 • 1回复 待解决
导航栏如何适配,有人知道吗?
2544浏览 • 0回复 待解决
IDE如何开启ASAN,有人知道吗
1013浏览 • 1回复 待解决
如何使用快速修复,有人知道吗
1461浏览 • 1回复 待解决
如何定义dialog动画,有人知道吗?
2955浏览 • 1回复 待解决
深色模式如何屏蔽?有人知道吗
1021浏览 • 0回复 待解决
如何引用HSP库,有人知道吗?
2459浏览 • 1回复 待解决
clientid相关问题,有人知道吗
2773浏览 • 1回复 待解决
webview组件demo ,有人知道吗
1671浏览 • 1回复 待解决
有人知道吗
1169浏览 • 1回复 待解决