用角度 2 绘制图像答案

【问题标题】：Drawing in image with angular 2用角度 2 绘制图像
【发布时间】：2017-11-21 09:39:31
【问题描述】：

我正在使用 Angular 2 开发应用程序。在我的应用程序中，我正在上传图像。在这个图像中，我需要在图像中标记或绘制特定部分。角度 2 是否可行。我没有找到任何解决方案。我需要像在 Windows 中绘制应用程序一样绘制图像。

请帮忙！！

【问题讨论】：

你可以假设你可以用 javascript 做的所有事情，你也可以用 angular 或其他框架来做。说到底，Angular 只是一个 javascript 框架。
我在询问这方面的任何可能性。或任何其他解决方案。请建议
stackoverflow.com/questions/10324949/…

标签： angular angular2-template angular2-services angular2-directives

【解决方案1】：

是的，您可以使用 Canvas 来实现。这是一个例子：

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

@Component({
    selector: "canvas-component"
    ,templateUrl: "./canvas.template.html"
   
})

export class CanvasScene implements AfterViewInit,  IScene  {

    
    //Loading Canvas and Images html elements    
    @ViewChild('myCanvas') canvasRef: ElementRef;
    @ViewChild('bubbleimg') bubble_img: ElementRef
   
   //Canvas Context
   ctx: CanvasRenderingContext2D;
   
   ngOnInit() {     
      this.ctx  = this.canvasRef.nativeElement.getContext('2d');
      this.paint(this.ctx);
   }

   paint(ctx) {        
            
     ctx.drawImage(this.bubble_img, 0, 0, 70, 50);
     //FrameRate To Repaint 
     setTimeout(() => 
     {
         this.paint(ctx);
     },
     100);
   }

HTML 代码

<canvas #myCanvas style="width:100%" >    

</canvas>

<img #bubbleimg src="assets/bubble.png">

针对 Angular 8+ 更新

替换

@ViewChild('myCanvas') canvasRef: ElementRef;
@ViewChild('bubbleimg') bubble_img: ElementRef

到这里：

@ViewChild('myCanvas', {static: false}) canvasRef: ElementRef;
@ViewChild('bubbleimg', {static: false}) bubble_img: ElementRef

阅读更多关于此功能的信息here

【讨论】：