HarmonyOS 鸿蒙Next 图片处理

对于图片进行裁剪和虚化（遮罩）的效果，可以参考这个文档：
‘https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-universal-attributes-sharp-clipping-V13’
如果觉得上面文档中遮罩的效果不够，可以参考这个文档，他有模糊图片的功能：
‘https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/js-apis-effectkit-V13#blur’

可以参考下：

import http from '[@ohos](/user/ohos).net.http';
import image from '[@ohos](/user/ohos).multimedia.image';
import effectKit from '[@ohos](/user/ohos).effectKit';

[@Component](/user/Component)
export struct TestBlurImage {
 [@State](/user/State) blurBackImage?: image.PixelMap = undefined
 [@State](/user/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)
   }
 }