带有 Canvas drawImage 的 Angular 5 未显示答案

【问题标题】：Angular 5 with Canvas drawImage not showing up带有 Canvas drawImage 的 Angular 5 未显示
【发布时间】：2018-07-06 16:35:54
【问题描述】：

尝试使用 drawImage 将背景图像添加到画布，但它没有显示出来。我知道图像的路径是正确的，因为我可以做到 <img src="{{ imageName }}" /> 并且有效。其他一切在 JavaScript 中都可以正常工作，但不能很好地转换为 Angular。

HTML：

<canvas #canvas></canvas>

打字稿：

import { Component, OnInit } from '@angular/core';
...

@Component({
  selector: 'app-box-picker',
  templateUrl: './box-picker.component.html',
  styleUrls: ['./box-picker.component.css']
})
export class BoxPickerComponent implements OnInit {
  @ViewChild('canvas') public canvas: ElementRef;

  canvasEl: any;
  ctx: CanvasRenderingContext2D;

  @Input() public width = 535.0;
  @Input() public height = 669.25;

  mousePosition: any;
  isMouseDown: boolean;
  dragoffx: number;
  dragoffy: number;

  circles: any;

  imageObj = new Image();
  imageName = "../../assets/pdf.png";

  constructor() {
  }

  ngOnInit() {

  }

  public ngAfterViewInit() {
    this.canvasEl = this.canvas.nativeElement;
    this.ctx = this.canvasEl.getContext('2d');

    this.canvasEl.width = this.width;
    this.canvasEl.height = this.height;

    this.imageObj.src = this.imageName;
    console.log(this.imageName);
    console.log(this.imageObj);
    // init circles
    var c1 = new Circle();
    c1.init(50, 50, 15, "rgba(217,83,79, .5)", "black", this.ctx);
    // console.log(c1);
    c1.out();

    this.circles = [c1];

    this.draw();

    this.captureDownEvents(this.canvasEl);
    this.captureMoveEvents(this.canvasEl);
    this.captureUpEvents(this.canvasEl);
  }

  draw() {
    //clear canvas
    this.ctx.clearRect(0, 0, this.canvasEl.width, this.canvasEl.height);
    this.ctx.drawImage(this.imageObj, 0, 0, this.canvasEl.width, this.canvasEl.height);
    this.drawCircles();
  }

  drawCircles() {
    for (var i = this.circles.length - 1; i >= 0; i--) {
      this.circles[i].draw();
    }
  }
...
}

当我执行console.log(this.imageObj); 时，有时我得到<img src="../../assets/pdf.png">，而其他时候我只得到<img>。这有什么关系吗？

【问题讨论】：

您需要等待您的图像已加载，然后才能对其执行任何操作。在这里，您在设置图像 src 的同一流程中调用 draw，因此当您绘制它时，它是一个 0*0 图像。
CanvasContext2D drawImage() issue [onload and CORS]的可能重复

标签： angular typescript canvas

【解决方案1】：

@Kaiido 是正确的。我需要等待图像加载。我正在使用setTimeout(e => this.draw(), 500);，直到找到更好的解决方案。

【讨论】：

您可以在图片的onload 中进行绘制，即let image = new Image(); image.onload = function() { this.draw() }; image.src = '///';

【解决方案2】：

在您的 javascript（或 typescript 代码中，您可以像这样解决图像超时问题：

var ctx = element.getContext("2d");
var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0, img.width, img.height);
    // do other canvas handling here!
}
img.src = "assets/images/image.png";

这在 HTML5 上 100% 工作，但还没有尝试使用 ts 文件。希望这会有所帮助！

【讨论】：

【解决方案3】：

尝试使用以下代码：

组件 HTML

<img #pdf style="display: none;" src="assets/pdf.png" />
<canvas #canvas></canvas>

Component.ts

 @ViewChild('canvas') public canvas: ElementRef;
 //Assets
 @ViewChild('pdf') imageObj: ElementRef;
 canvasEl: any;
 ctx: CanvasRenderingContext2D;
 ...
 draw() {
    ...
    this.ctx = this.canvas.nativeElement.getContext('2d');
    this.ctx.drawImage(imageObj.nativeElement, width, height);     
 }
 ...

最后，您的所有代码都可以了。只需使用 Element Ref 实现加载图像。

【讨论】：

对不起，这似乎不起作用。图片根本不显示。
你试过了吗？我在我的 GitHub 中有这样的工作方式

【解决方案4】：

您还可以将onload 包装在Promise 中，并为此使用async/await 模式：

export async function loadImage(src: string): Promise<HTMLImageElement> {
    const image = new Image();
    image.src = src;
    return new Promise(resolve => {
        image.onload = (ev) => {
            resolve(image);
        }
    });
}

用法：

async drawImage() {
    const image: HTMLImageElement = await loadImage('assets/pdf.png');
    this.ctx = this.canvas.nativeElement.getContext('2d');
    this.ctx.drawImage(image, 0, 0, image.width, image.height);
}

【讨论】：