有什么方法可以在 rxjs 中使用可观察对象来处理 canvas.toBlob 吗？

Question

我一直在尝试使用 rxjs 中的可观察对象来处理 canvas.toBlob 而不是 promise 或回调。 bindCallback 运算符似乎很合适，所以我尝试过：

bindCallback(canvas.toBlob)().pipe(
  map((blob: Blob) => URL.createObjectURL(blob))
);

但它给我 ERROR TypeError: Illegal invocation 错误。

如果操作员不合适，还有其他想法吗？感谢任何见解。谢谢。

Answer 1

问题是函数 canvas.toBlob 丢失了调用上下文。

如果你尝试这个，你会遇到同样的问题：

const toBlob = canvas.toBlob;

toBlob(blob => console.log('hello'));
// ERROR TypeError: Illegal invocation

此函数 toBlob 在内部使用 this，但由于您不是从对象调用它 this 未定义。

解决方法是绑定到原来的canvas:

bindCallback(canvas.toBlob.bind(canvas))().pipe(
  map((blob: Blob) => URL.createObjectURL(blob))
);

Is there any way to handle canvas.toBlob with observables in rxjs?