преобразовать изображение в строку с помощью Angular

Question

Я конвертирую изображение в строку со следующим кодом.Преобразование работает, когда я включаю некоторые операторы отладчика.Он перестает работать, когда я их удаляю.Вот ссылка на мой github ссылка на github Что мне здесь не хватает?

export class ImageUploaderComponent implements OnInit {
  public context: CanvasRenderingContext2D;
  @ViewChild('mycanvas') mycanvas;
  preview(e: any): void {
    const canvas = this.mycanvas.nativeElement;
    const context = canvas.getContext('2d');
    context.clearRect(0, 0, 300, 300);

    // show image to canvas
     const render = new FileReader();
    render.onload = (event: any) => {
      const img = new Image();
      img.onload = () => {
          canvas.width = img.width;
          canvas.height = img.height;
          context.drawImage(img, 0, 0);
      };
      img.src = event.target.result;
    };
    render.readAsDataURL(e.target.files[0]);
    this.convertBufToStr(render.result);
    localStorage.setItem('imageStore', render.result);
  }
   convertBufToStr(buf): string {
    return String.fromCharCode.apply(null, new Uint16Array(buf));
  }

  convertStrToBuf(str) {
    const buf = new ArrayBuffer(str.length * 2);
    const bufView = new Uint16Array(buf);
    for (let i = 0, strLen = str.length; i < strLen; i++) {
      bufView[i] = str.charCodeAt(i);
    }
    return buf;
  }
  ngOnInit() {}

}

Answer 1

Метод readAsDataURL является асинхронным.Когда вы звоните localStorage.setItem('imageStore', render.result), результаты еще не заполнены.Вот почему добавление точек отладки решает вашу проблему.

Что вы можете сделать, это прослушать событие загрузки программы чтения файлов.

reader.addEventListener("load", function () {
    this.convertBufToStr(render.result);
    localStorage.setItem('imageStore', render.result)
}, false);

Подробнее об этом API и о том, как его можно использовать, можно прочитать в статье о MDN здесь: https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL