Question

在上下文中：我使用最新版本的Angular和TypeScript，我需要从文件选择器中显示所选图像。选择任何图像后，我转换为base64以获取字符串。鉴于String i显示所选图像，并且在我作为实体的属性推送到REST服务器之后。

问题在于我没有获得图像的正确base64字符串，但我可以在Google开发人员工具中看到生成的图像有两个URL：一个是正确的，另一个是空白的，最后一个是返回toDataURL（）函数。

我一直尝试使用大量示例和不同的代码，但仍然无法正常工作。

此外，我必须说它在我测试的时间内随机工作约1％。

遵循代码：

地板form.component.html

<div *ngIf="showForm" class="form-group row">
  <input type="file" id="picture" autofocus=""  #file (change)="addPicture(file)" />
    <img [src]="floor.picture" />
</div>

地板form.component.ts

addPicture(input) {
   const file = input.files[0];
   const reader = new FileReader();

   reader.addEventListener('load', (event: any) => {
      this.floor.picture = this.resizeImage(event.target.result, file.type, 480, 480);
   }, false);

   reader.readAsDataURL(file);
}


resizeImage(imageData, type, MAX_WIDTH = 480, MAX_HEIGHT = 480) {
    const img = document.createElement('img');
    img.src = imageData;
    let width = img.width;
    let height = img.height;
    if (width > height) {
      if (width > MAX_WIDTH) {
        height *= MAX_WIDTH / width;
        width = MAX_WIDTH;
      }
    } else {
      if (height > MAX_HEIGHT) {
        width *= MAX_HEIGHT / height;
        height = MAX_HEIGHT;
      }
    }
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, width, height);
    return canvas.toDataURL(type);
  }

chrome developer tools screenshot在此屏幕截图中可以看到它返回空网址，但是如果我删除了if's的{{1}}我将获得完整的网址但是空的图像。

很抱歉，如果我遗漏了一些东西，但我是Angular的新人。

Angular2中的toDataURL（）返回带有空白图像的URL

0 个答案: