Question

我正在尝试获取图像加载后的尺寸。我已经从api响应中收到了URL，创建了一个图像实例并进行了加载，我想分派GET_IMAGE_DIMENSIONS操作，将图像宽度作为有效载荷传递。我的代码在下面。

但是，似乎因为有onload函数，所以GET_IMAGE_DIMENSIONS操作不在原始的mergeMap范围内，但是我不确定如何解决它。还是其他问题？

yes

Answer 1

如果要将尺寸作为链的一部分，则需要在mergeMap内部返回Observable。内部的Observable会手动将尺寸标注到链上，然后完成。

const getImageDimensionsEpic = action$ =>
  action$.ofType('UPLOAD_IMAGE_SUCCESS').pipe(
    mergeMap(payload => {
      let img = new Image();
      img.src = payload.image_url;

      return new Observable(observer => {
        img.onload = function() {
          observer.next({
            type: 'GET_IMAGE_DIMENSIONS',
            img: img.width
          });
          observer.complete();
        };
      });
    })
  );

在Redux Observable中，如何在加载img之后获取图像大小

1 个答案: