создать холст в библиотеке на угловой 6

Question

Я пытаюсь создать библиотеку под углом, которая позволила бы мне обрезать изображение, для которого я хотел бы использовать canvas. Я создаю библиотеку с "NG Generate Library". когда я пытаюсь нарисовать свой холст, ничего не появляется.

crop-image.component.html:

<div class="container">
  <canvas #canvas [width]="width" [height]="height" >
hello
  </canvas>
  <div>
    <input type="file" accept="/image/*" (change)="onImageChange($event)">
  </div>
</div>

crop-image.component.ts:

import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';

// @ts-ignore
@Component({
  selector: 'lib-crop-image',
  templateUrl: './crop-image.component.html',
  styleUrls: ['./crop-image.component.css']
})
export class CropImageComponent implements OnInit {


  imageUrl;
  @Input() width = 500;
  @Input() height = 500;
  @ViewChild('canvas') canvasRef: ElementRef;
  constructor() { }

  ngOnInit() {
    const ctx = this.canvasRef.nativeElement.getContext('2d');
    ctx.moveTo(0, 0);
    ctx.lineTo(100, 100);
    ctx.stroke();
}
 }

Answer 1

Используйте следующее, чтобы получить ссылку на холст

import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';

// @ts-ignore
@Component({
  selector: 'lib-crop-image',
  templateUrl: './crop-image.component.html',
  styleUrls: ['./crop-image.component.css']
})
export class CropImageComponent implements OnInit, AfterViewInit  {


  imageUrl;
  @Input() width = 500;
  @Input() height = 500;
   @ViewChild('canvas') canvasRef: ElementRef;
  public context: CanvasRenderingContext2D;

  constructor() { }

  ngOnInit() {
}

  ngAfterViewInit(): void {
    this.context = (<HTMLCanvasElement>this.canvasRef.nativeElement).getContext(
      '2d');
    this.context.moveTo(0, 0);
    this.context.lineTo(100, 100);
    this.context.stroke();
  }
 }

Answer 2

 ngOnInit() {
    const ctx = this.canvasRef.nativeElement.getContext('2d');
    ctx.moveTo(0, 0);
    ctx.lineTo(100, 100);
    ctx.stroke();
}

должно быть

 ngAfterViewInit() {
    const ctx = this.canvasRef.nativeElement.getContext('2d');
    ctx.moveTo(0, 0);
    ctx.lineTo(100, 100);
    ctx.stroke();
}