Question

我想创建一个返回文件可观察量的函数

我当前的工作代码使用了承诺

testPromise(): Promise<File> {

  return new Promise((resolve, reject) => {

    const canvas = document.createElement('canvas');
    canvas.width = 800;
    canvas.height = 600;

    const context = canvas.getContext('2d');
    context.drawImage(image, 0, 0, 800, 600);

    canvas.toBlob((blob: Blob) => resolve(new File([blob], name)), type, quality);
  });
}

而不是那样，我想返回Observable<File>

我尝试了以下操作，但我无法传递toBlob()和type等quality个参数

testObservable(): Observable<File> {

  const canvas = document.createElement('canvas');
  canvas.width = 800;
  canvas.height = 600;

  const context = canvas.getContext('2d');
  context.drawImage(image, 0, 0, 800, 600);

  const toBlob = bindCallback(canvas.toBlob);

  return toBlob().pipe(
    map((blob: Blob) => {
      return new File([blob], name)
    })
  );
}

预期行为

const toBlob = bindCallback(canvas.toBlob);
toBlob(type, quality) // <= Expected 0 arguments, but got 2.

我在 toBlob Expected 0 arguments, but got 2.

上收到错误消息

当前行为

const toBlob = bindCallback(canvas.toBlob);
toBlob() // <= No type or quality arguments

这是根据MDN docs

的canvas.toBlob界面

void canvas.toBlob（callback，mimeType，qualityArgument）;

PS ：我不想将Promise转换为Observable，但我需要将回调直接转换为Observable

有什么想法吗？

Answer 1

我担心bindCallback在这里不是一个好选择，因为它希望回调是最后一个参数，而不是toBlob期望的第一个参数。

我认为你必须自己用na Observable打电话：

return new Observable(observer => {
  canvas.toBlob(result => {
    observer.next(result);
    observer.complete();
  }, type, quality);
});

如何将canvas.toblob（）回调转换为Observable

1 个答案: