canvas - 有没有办法用 rxjs 中的 observables 处理 canvas.toBlob？

Question

我一直在尝试处理 canvas.toBlob在 rxjs 中使用 observables 而不是 Promise 或回调。 bindCallback运算符似乎很合适，所以我尝试过:

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

但它给了我 ERROR TypeError: Illegal invocation错误。
如果运算符(operator)不合适，还有其​​他想法吗？
欣赏任何见解。谢谢。

Answer 1

问题是函数 canvas.toBlob丢失调用上下文。
如果你尝试这个，你会遇到同样的问题:

const toBlob = canvas.toBlob;

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

这个函数， toBlob在内部使用 this ，但由于您不是从对象 this 调用它未定义。
解决方案是将其绑定(bind)到原始 Canvas :

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