我想在angular2

Question

我有一个来自网址的图片。我想在这张图片上画一个矩形。我目前正在尝试使用canvas来实现这一目标，但我还没有完全理解如何实现它。当我使用此代码时，画布中没有任何变化，它仍为空白。

我的html中有这个

 <canvas #layout></canvas>

然后在我的组件打字稿文件

中

@ViewChild('layout') canvasRef;

//other code here

drawRectangle(file: any): void
{
    let canvas = this.canvasRef.nativeElement;
    let context = canvas.getContext('2d');

    let source = new Image();
    source.src = this.imgUrl;

    source.onload = () =>
    {
        context.drawImage(source.src,0,0);
        context.beginPath();
        context.rect(file.left, file.top, file.width, file.height);
        context.stroke();  
    };


}

Answer 1

尝试在更新<input name="email" placeholder=" Your Email Address"> 之后添加onload()回调 。您还需要将图片（source.src）传递给source而不是drawImage，所以这里是更新后的代码：

所以

source.src