我是Angle 2的新手,我致力于图像裁剪插件,我想在画布上显示图像。这是我的html代码
<div class="row">
<div class="col-sm-6">
<canvas id="layout" width="400" height="300">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
这是我的打字稿文件
import { Component, OnInit, ViewChild } from '@angular/core';
@Component({
selector: 'app-four',
templateUrl: './four.component.html',
styleUrls: ['./four.component.css']
})
export class FourComponent implements OnInit {
image: HTMLImageElement;
profPic: any;
context: CanvasRenderingContext2D;
constructor() { }
@ViewChild('layout') canvas;
@ViewChild('photo') photo;
ngOnInit() {
const _canvas = this.canvas.nativeElement;
//let photo = this.photo.nativeElement;
this.context = (<HTMLCanvasElement>_canvas).getContext('2d');
this.image = new Image();
this.image.src = '../../assets/images/1.jpg';
this.context.drawImage(this.image,20,20,500,260);
}
}
我有错误
错误TypeError:无法读取未定义的属性'nativeElement'
请帮我解决这个问题
谢谢
使layout
本地模板变量
<canvas #layout id="layout" width="400" height="300">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句