使用 Angular 将图像转换为字符串答案

【问题标题】：convert image to string with Angular使用 Angular 将图像转换为字符串
【发布时间】：2019-02-23 01:51:20
【问题描述】：

我正在使用以下代码将图像转换为字符串。当我包含一些调试器语句时，转换工作。当我删除它们时它停止工作。这是我的 github 的链接github link 我在这里错过了什么？

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() {}

}

【问题讨论】：

您在哪里设置了调试点以使示例正常工作？另外，没有它们，代码的哪一部分会停止工作？只是字符串转换吗？
@nipuna777 我在 localStorage.setItem... 之后和 return 语句之前的 convertBufToStr 函数中添加了一个调试器语句。没有调试点，imageStore 的值为空字符串

标签： angular typescript local-storage

【解决方案1】：

readAsDataURL 方法是异步的。当您调用localStorage.setItem('imageStore', render.result) 时，尚未填充结果。这就是为什么添加调试点可以解决您的问题。

你可以做的是监听文件阅读器的加载事件。

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

您可以在此处的 MDN 文章中阅读有关此 API 以及如何使用它的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

【讨论】：