我想在 angular2 的图像上绘制一个矩形

Question

我有一个从 url 获取的图像。我想在这张图片上画一个矩形。我目前正在尝试使用画布来实现这一点，但我并不完全理解如何实现它。当我使用此代码时，画布中没有任何变化，它保持空白。

我的 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

尝试在更新source.src 之后添加onload() 回调。您还需要将图像 (source) 传递给 drawImage 而不是 source.src 所以这是更新后的代码：

所以

@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.onload = () =>
    {
        context.drawImage(source, 0, 0);
        context.beginPath();
        context.rect(file.left, file.top, file.width, file.height);
        context.stroke();  
    };

    source.src = this.imgUrl;




}