HarmonyOS 如何在canvas上画出网络图片内容，图片内容来自后端返的http链接

参考示例如下：

// xxx.ets
import { common } from '@kit.AbilityKit'
// 导入功能涉及的权限申请、回调接口
import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { image } from '@kit.ImageKit';
import { http } from '@kit.NetworkKit';
import { fileIo as fs, fileUri } from '@kit.CoreFileKit';

@Entry
@Component
struct ImageExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  // 网络图片地址
  private url: string = ""

  loadImageWithUrl(url: string) {
    try {
      // 使用request下载图片并在回调函数中保存图片到相册
      http.createHttp().request(url,
        {
          method: http.RequestMethod.GET,
          connectTimeout: 60000,
          readTimeout: 60000
        }, (error: BusinessError, data: http.HttpResponse) => {
          console.log(error.message + "----22")
          this.loadImageCallback(error, data);
        })
    } catch (e) {
      console.log(`testTAG ====== e:${e}`);
    }
  }

  async loadImageCallback(error: BusinessError, data: http.HttpResponse) {
    if (http.ResponseCode.OK === data.responseCode) {
      console.log("11")
      let imageBuffer: ArrayBuffer = data.result as ArrayBuffer;
      this.saveImage(imageBuffer)
    } else {
      console.error("testTAG==error occurred when image downloaded!")
    }
  }

  async saveImage(imageBuffer: ArrayBuffer) {
    // 获取应用文件路径
    let context = getContext(this) as common.UIAbilityContext;
    let filesDir = context.filesDir;
    // 新建并打开文件
    let file = fs.openSync(filesDir + '/testimage.jpg', fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
    // 写入一段内容至文件
    let writeLen = fs.writeSync(file.fd, imageBuffer);
    const imageUri = fileUri.getUriFromPath(filesDir + '/testimage.jpg')
    console.log(`testTAG: imageUri` + imageUri);
    // 关闭文件
    fs.closeSync(file);
    const imageSource: image.ImageSource = image.createImageSource(imageUri);
    let decodingOptions: image.DecodingOptions = {
      editable: true,
      desiredPixelFormat: 3,
    }
    // 创建pixelMap并进行简单的旋转和缩放
    imageSource.createPixelMap(decodingOptions).then(result => {
      // this.image = result;
      this.context.drawImage(result, 0, 0, 500, 500, 0, 0, 400, 200)
    });
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button("绘制网络图片").onClick(() => {
        this.loadImageWithUrl(this.url)
      })
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() => {
          // this.context.drawImage( this.img,0,0,500,500,0,0,400,200)
        })
    }
    .width('100%')
    .height('100%')
  }
}