HarmonyOS 鸿蒙Next 参考实况窗demo，实况窗使用网络图片不展示

1、传入正常的PixelMap。 2、参考图片压缩，将image.PixelMap大小控制在30KB以内。

注意：

不是指原图不能大于30KB，可以调用下面方法检查下大小，icon.getPixelBytesNumber()的值除以1024不能大于30

icon = await imageSource.createPixelMap();

icon.getPixelBytesNumber()

还可以考虑以下替代方案：

1).使用ArkWeb组件：ArkWeb组件支持广告过滤和网络拦截功能，可以通过这些功能来控制和处理网络图片的加载。

2).自定义绘制：通过自定义绘制功能，可以在卡片上绘制网络图片，确保图片在实况窗中正确显示。

例如：

// 由于ArkTS卡片不支持直接使用网络URL，你需要首先将网络上的图片资源下载到本地。

// 使用HTTP工具预下载图片，并将图片保存到应用的本地存储。

// 使用ImageBitmap对象 ：

// 创建ImageBitmap对象时，虽然不能直接使用网络URL，但可以使用本地图片路径。

// 如果图片已经下载到本地，你可以使用本地路径创建ImageBitmap对象。

// 假设imgPath是下载到本地的图片路径

let imgBitmap = new ImageBitmap(imgPath);

// 绘制ImageBitmap到Canvas ：

// 在你的组件中，使用CanvasRenderingContext2D的对象方法drawImage将ImageBitmap对象绘制到画布上。

// 注意，你需要确保Canvas和ImageBitmap都已经准备好，才能进行绘制操作。

@Entry

@Component

struct MyComponent {

  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D();

  private img: ImageBitmap;

  build() {

    Flex({

      direction: FlexDirection.Column,

      alignItems: ItemAlign.Center,

      justifyContent: FlexAlign.Center

    }) {

      Canvas(this.context)

        .width('100%')

        .height('100%')

        .backgroundColor('ffff00')

        .onReady(() => {

          this.context.drawImage(this.img, 0, 0, 500, 500, 0, 0, 400, 200);

          this.img.close();

        });

    }

    .width('100%')

    .height('100%');

  }

}