javascript - 如何将 canvas.toblob() 回调转换为 Observable

Question

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

我当前的工作代码使用 promise

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

这里是canvas.toBlob接口(interface)，根据MDN docs

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);
});