Как преобразовать обратный вызов canvas.toblob () в Observable - PullRequest
Новая
       9

Как преобразовать обратный вызов canvas.toblob () в Observable

0 голосов
/ 06 июня 2018

Я хочу создать функцию, которая возвращает наблюдаемый файл

Мой текущий рабочий код использует обещание 

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 в соответствии с MDN документами

void canvas.toBlob (callback, mimeType, qualityArgument);

PS : я не хочу преобразовывать Обещание в Observable, но мне нужно преобразовать обратный вызов напрямуюнаблюдаемому

Есть идеи?

1 Ответ

0 голосов
/ 06 июня 2018

Боюсь, bindCallback не очень хороший выбор, потому что он ожидает, что обратный вызов будет последним аргументом, а не первым, как ожидал toBlob.

Я думаю, вам придетсяоберните этот вызов самим Наблюдаемым: 

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