Angular 2中如何等待图像加载完成后返回Canvas ImageData

• 原代码的逻辑漏洞来自于没有识别到图片加载是异步行为：给Image对象赋值src后，浏览器会异步发起网络请求下载图片，不会阻塞后续代码执行，此时立刻执行drawImage时，图片资源还未加载完成，canvas上绘制的是空白内容
• 原代码直接使用of(imgData)同步返回数据，完全没有把图片加载、canvas绘制的异步流程纳入Observable的生命周期，所以订阅方刚收到Observable实例就会同步发射空白的ImageData，根本等不到异步流程执行完成

把整个异步流程封装在Observable构造器中，保证只有当图片加载完成、canvas绘制、ImageData获取全部完成后，才向订阅方返回结果，修正后的服务代码如下：

getColorArray(movie: MovieDb): Observable<ImageData> {
  return new Observable((subscriber) => {
    const img = new Image();
    img.crossOrigin = "Anonymous";

    img.onload = () => {
      try {
        // 创建内存中的离屏canvas，避免依赖页面DOM元素造成并发冲突
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        if (!ctx) {
          subscriber.error('当前浏览器不支持Canvas 2D能力');
          return;
        }

        canvas.height = 50;
        canvas.width = 30;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        
        // 绘制完成后再提取像素数据
        const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        subscriber.next(imgData);
        subscriber.complete();
      } catch (err) {
        subscriber.error(err);
      }
    };

    img.onerror = (loadErr) => {
      subscriber.error(`海报图片加载失败：${loadErr}`);
    };

    // 最后设置图片地址触发加载流程
    img.src = `https://www.themoviedb.org/t/p/w342/${movie.poster}`;
  });
}

• 替换原有的DOM取canvas逻辑：使用内存中的离屏canvas完成所有绘制操作，避免多个组件同时调用服务时，共用同一个页面canvas导致的绘制覆盖问题
• 所有绘制、像素提取逻辑全部放在图片onload回调内：保证图片资源完全解码渲染完成后再执行canvas操作，杜绝拿到空白像素数据的问题
• 用Observable构造器手动管理流程状态：只有当ImageData成功获取、或者流程出现异常时，才向订阅方发射对应的通知，从根本上解决同步提前返回的问题
• 补充全链路异常捕获：覆盖canvas能力不支持、跨域拦截、图片加载失败等异常场景，避免组件层出现未处理的运行时报错

内容的提问来源于stack exchange，提问作者HomeAlone