Блог

Главная - Вопросы по программированию - создать холст в библиотеке на angular 6

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

#angular #canvas

#angular #холст

Вопрос:

Я пытаюсь создать библиотеку на angular, которая позволила бы мне обрезать изображение, для которого я хотел бы использовать 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>

обрезать-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();
}
 }

Комментарии:

1. Что вы имеете в виду под library ?

2. Вы хотите отобразить выбранное изображение в canvas ?

3. Пожалуйста, покажите код, который добавляет lib-crop-image компоненты в HTML. Вы уверены, что компонент найден Angular?

4. вы можете использовать его только в afterviewinit

Ответ №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();
  }
 }

Ответ №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();
}